Cara Mengakses Atribut Data dalam JavaScript: Mengapa `this.typeId` Tidak Berfungsi dan Bagaimana Menggunakan `set data` Sebaliknya?

Mendapatkan Atribut Data dalam JavaScript

Dalam elemen HTML, atribut data menyediakan cara yang mudah untuk menyimpan maklumat tambahan. Walau bagaimanapun, mengakses atribut ini dalam JavaScript boleh menjadi rumit. Mari kita mendalami isu khusus dan teroka penyelesaiannya.

Cabaran

Pertimbangkan kod HTML berikut:

<code class="html"><span data-typeId="123" data-type="topic" data-points="-1" data-important="true" id="the-span"></span></code>

Dalam JavaScript, kami berhasrat untuk mendapatkan semula atribut data ini dan gunakannya dalam objek JSON, seperti yang ditunjukkan di bawah:

<code class="javascript">document.getElementById("the-span").addEventListener("click", function() {
  var json = JSON.stringify({
    id: parseInt(this.typeId),
    subject: this.datatype,
    points: parseInt(this.points),
    user: "H. Pauwelyn"
  });
});</code>

Walau bagaimanapun, percubaan untuk mengakses atribut data menggunakan this.typeId, this.datatype dan this.points menghasilkan null.

Penyelesaian

Untuk mengakses atribut data dalam JavaScript, kami mesti menggunakan sifat dataset. Berikut ialah kod yang diubah suai yang mencapai matlamat kami:

<code class="javascript">document.getElementById("the-span").addEventListener("click", function() {
  var json = JSON.stringify({
    id: parseInt(this.dataset.typeid),
    subject: this.dataset.type,
    points: parseInt(this.dataset.points),
    user: "Luïs"
  });
});</code>

Objek JSON yang terhasil akan mengandungi data yang diingini:

<code class="json">{ "id": 123, "subject": "topic", "points": -1, "user": "Luïs" }</code>

Dengan memanfaatkan sifat set data, kami boleh mendapatkan semula atribut data dengan mudah dalam JavaScript, membolehkan kami menggunakan nilai mereka dalam kod kami.

Atas ialah kandungan terperinci Cara Mengakses Atribut Data dalam JavaScript: Mengapa `this.typeId` Tidak Berfungsi dan Bagaimana Menggunakan `set data` Sebaliknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!