Javascript - 如何在单击时获取按钮的多个数据属性

Question

我有多个带有 data-rel 属性的按钮，如何在每个按钮被单击时获取该属性？

HTML

<button class="category" data-rel="all">All</button>
<button class="category" data-rel="banana">Banana</button>
<button class="category" data-rel="orange">Orange</button>
<button class="category" data-rel="watermelon">Watermelon</button>

JS

var btn = document.querySelector('.category');

btn.addEventListener('click', function() {
  var el = btn.getAttribute('data-rel');      
  alert(el);
})

我只能得到第一个按钮的属性，不能得到其余的

var btn = document.querySelector('.category');
    
btn.addEventListener('click', function() {
  var el = btn.getAttribute('data-rel');      
  alert(el);
})

.button {
  padding: 10px 20px;
}

<button class="category" data-rel="all">All</button>
<button class="category" data-rel="banana">Banana</button>
<button class="category" data-rel="orange">Orange</button>
<button class="category" data-rel="watermelon">Watermelon</button>


    

Answer 1

我假设您想要一个函数来处理每个按钮。因此我在循环外声明函数，所以它只声明一次，因此节省了内存。无论您在下面使用哪个版本来添加事件监听器，您都将需要此句柄函数。

// The handle function is declared outside the loop, saving memory.
// The current button is found in this
// Also using dataset to get the data.
function handle(event) {
  alert( this.dataset.rel );
}

要获取您需要使用的所有匹配元素 querySelectorAll .它返回一个集合，您可以使用 forEach 方法轻松遍历集合:

document.querySelectorAll('.category').forEach(
  function (btn) {
    btn.addEventListener('click', handle );
  }
);

这是相同类型的调用，但使用的是现代箭头函数。我不知道你喜欢什么。

document.querySelectorAll('.category').forEach(
  btn => btn.addEventListener('click', handle )
);