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）

determineWhereToSlide只是一个可立即发出警报的函数。最终，它将被用来推动旋转木马前进。

我已经制作了一个有效的示例，如果您在其他浏览器中打开它，则可以看到该问题。

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

不要按索引引用属性（即使看起来应该起作用，属性were unordered至少要到DOM3为止）。使用以下任何一项：

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

2 个答案: