javascript - 在 html 中获取数据属性时，我得到了未定义的数据集

Question

我在html中有这段代码，

<ul id="locationSelect" style="visibility: visible;">
  <li class="location-select" data-num="9"></li>
  <li class="location-select" data-num="9"></li>
  <li class="location-select" data-num="7"></li>
  <li class="location-select" data-num="6"></li>
</ul>

现在我想在用户使用纯 javascriptdata-num单击任何元素时获取属性的值。<li>

到目前为止，这里是 javascript 的代码。

let locSel = document.getElementById('locationSelect').getElementsByClassName('location-select');

for(var i=0; i < locSel.length; i++) {
    locSel[i].onclick = function() {
      let markerNum = locSel[i].dataset.num;
      google.maps.event.trigger(markers[markerNum], 'click');
    };
}

鉴于该代码，我得到了未定义的部分，locSel[i]然后得到了堆栈（我不知道这个单词堆栈的正确拼写）。我知道的想法。

请问有什么建议吗？

标签： javascript

Answer 1

let locSel = document.getElementById('locationSelect').getElementsByClassName('location-select');

for(let i=0; i < locSel.length; i++) {
    locSel[i].onclick = function() {
      let markerNum = locSel[i].dataset.num;
      google.maps.event.trigger(markers[markerNum], 'click');
    };
}