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);
})

我只能获取第一个按钮的属性，而不是其余的

＆＃13;

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

＆＃13;

.button {
  padding: 10px 20px;
}

＆＃13;

<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>

＆＃13;

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 -method轻松遍历集合：

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

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

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

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

1 个答案: