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。它returns一个集合，可以使用forEach-方法轻松遍历集合：

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

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

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

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

Javascript - How to get multiple data attribute of button when on click

custom-data-attribute