為什么element.attribute在Edge中不起作用？

Question

我正在用javascript創建一個小的測驗類型的應用程序。 我的html結構如下所示。

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary btn-insight" data-target="#myCarousel" data-responseID="1">
  <input type="radio" name="options" id="option1" autocomplete="off"> 
  <h5>1</h5> 
  <p class="mb-0">label for 1</p>
  <div class="line-bottom gradient-purple"></div>
</label>
...
</div>

我正在嘗試使用自定義數據屬性data-responseID來確定用戶提供了什么答案。

程序啟動時，使用querySelectorAll遍歷標簽，並在每個標簽上附加一個Click偵聽器。

const responseLables = document.querySelectorAll('div.btn-group-toggle > label');
responseLables.forEach(element => {
    element.addEventListener('click', function(e){
        const clickedResponse = element.attributes[2].value;
        determineWhereToSlide(clickedResponse);
    });
});

這在Firefox和Chrome中很好用，但在Edge中則不行。 （我不關心IE 11）

defineWhereToSlide只是一個提供警報的函數。 最終，它將被用來推動旋轉木馬前進。

我已經制作了一個有效的示例，如果您在其他瀏覽器中打開它，則可以看到該問題。

https://codepen.io/anon/pen/dLmQKZ?editors=1010

我不知道為什么會這樣。

*編輯1

我只是意識到屬性的順序是不同的。 如果將索引值更改為...attributes[1]...那么它就可以正常工作。 有沒有比提供索引更好的方法呢？

Answer 1

您可以使用getAttribute()方法。

取代這個

const clickedResponse = element.attributes[2].value;

對此

const clickedResponse = element.getAttribute('data-responseID')

Answer 2

不要按索引引用屬性（即使看起來應該起作用， 但至少在DOM3之前屬性是無序的 ）。 使用以下任何一種：

• element.getAttributeNode("data-responseID").value
• element.attributes["data-responseID"].value
• element.getAttribute("data-responseID")
• element.dataset.responseID