如何在下拉菜單中 console.log 一個屬性？

Question

我正在嘗試在 console.log 中記錄'data-id'屬性，但是當我點擊一個新的'.dropdown-item'時，我的控制台中不斷得到1 。 這是 HTML 的片段：

<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  {% for date in joined_dates %}
    <a class="dropdown-item" href="#" data-id="{{loop.index}}">{{date}}</a>
  {% endfor %}
</div>

這是javascript的一個片段：

d3.json('/data', function(error, closure_data) {
  var btn = d3.selectAll('.dropdown-item')
  btn.forEach(function(value, index) {
    value = btn.attr('data-id')
    btn.on('click', function() {
      d3.select('#text').text('1')
      console.log(value)
    })
  })
})

Answer 1

感謝@altocumulus，我找到了一個非常簡單的解決方案，它是：

d3.selectAll('.dropdown-item').on("click", function() { d3.select('#text').text('1'); console.log(this.dataset.id); })

我猜對此的解釋是data-id是data-類的一個子集，可以使用.dataset.id調用它的值。 我的理解是，在創建類時，我們幾乎可以在data-之后放置任何東西，並且仍然得到相同的結果。

如果有人有更好的解釋，請告訴我！ 謝謝！