使用 JS 獲取自定義 HTML 屬性並與“this”一起使用

Question

 const allButtonsToStore = document.getElementsByClassName("button"); let reason = []; for (let x=0; x < allButtonsToStore.length; x++) { allButtonsToStore[x].addEventListener("click", function(){ reason[x] = this.textContent; console.log("reason" + [x] + ": " + reason[x]); reason[x] = this.value; console.log("reason" + [x] + ": " + reason[x]); reason[x] = this.data-spec; console.log("reason" + [x] + ": " + reason[x]); }); }

 <div id="gamen" class="hidden"> <button class='button' data-next="gamen1" data-parent="gamen" data-spec="ram" value="2GB">Lichte games</button> <button class='button' data-next="gamen1" data-parent="gamen" data-spec="videokaart" value="2GB">Middel games</button> <button class='button' data-next="gamen1" data-parent="gamen" data-spec="processor" value="i9">Zware games</button> </div>

使用 JS，我獲得了所有按鈕，並且為了測試，我正在檢查是否可以獲得屬性（稍后我需要屬性和值）。

this.textContent; 和reason[x] = this.value; 工作正常。 只有我似乎無法弄清楚如何獲得自定義屬性this.data-spec;

this.data-spec; 給出 ReferenceError: 規范未定義
this."data-spec"; 還有this."[data-spec]"; 給出 SyntaxError: Unexpected string

this.[data-spec]; 和this.(data-spec); 給出意外的令牌錯誤

Answer 1

由於它是一個 HTML5 data-屬性，您實際上可以使用HTMLElement.dataset檢索其值，即

this.dataset.spec

請參閱概念驗證示例：

 const allButtonsToStore = document.getElementsByClassName("button"); let reason = []; for (let x=0; x < allButtonsToStore.length; x++) { allButtonsToStore[x].addEventListener("click", function(){ reason[x] = this.textContent; console.log("reason" + x + ": " + reason[x]); reason[x] = this.value; console.log("reason" + x + ": " + reason[x]); reason[x] = this.dataset.spec; console.log("reason" + x + ": " + reason[x]); }); }

 <div id="gamen" class="hidden"> <button class='button' data-next="gamen1" data-parent="gamen" data-spec="ram" value="2GB">Lichte games</button> <button class='button' data-next="gamen1" data-parent="gamen" data-spec="videokaart" value="2GB">Middel games</button> <button class='button' data-next="gamen1" data-parent="gamen" data-spec="processor" value="i9">Zware games</button> </div>

但是，您的代碼中有一點讓我感到擔憂，那就是您一直在覆蓋reason[x] 。 如果您稍后以某種方式使用數組reason ，請注意您只會獲得最后一個值（即data-spec的值），而不是textContent或textContent的value 。

---

如果您熟悉使用 ES6，您的代碼可以進一步優化：

 const allButtonsToStore = document.querySelectorAll('.button'); allButtonsToStore.forEach((el, i) => { el.addEventListener('click', () => { console.log(`reason${i}: ${el.textContent}`); console.log(`reason${i}: ${el.value}`); console.log(`reason${i}: ${el.dataset.spec}`); }); });

 <div id="gamen" class="hidden"> <button class='button' data-next="gamen1" data-parent="gamen" data-spec="ram" value="2GB">Lichte games</button> <button class='button' data-next="gamen1" data-parent="gamen" data-spec="videokaart" value="2GB">Middel games</button> <button class='button' data-next="gamen1" data-parent="gamen" data-spec="processor" value="i9">Zware games</button> </div>

Answer 2

有一個方法getAttribute()用於獲取屬性值。 您需要使用該方法並指定您需要獲取的屬性值。

對於您的代碼，它應該是這樣的this.getAttribute("data-spec");

如果屬性不存在，這將返回 null 或 ""