javascript - 将类添加到与每个单击元素具有相同匹配类的元素

Question

我需要将 .active 类添加到与我单击的 div 匹配的任何类的任何按钮:

<button class="valueA"></button>
<button class="valueB"></button>
<button class="valueC valueB"></button>

<div class="DYNAMIC CLASS"></div>

$("div.valueB").on("click", function() {
    ...
});

结果应该是:

<button class="valueB active"></button>
<button class="valueC valueB active"></button>

我尝试使用.each()，但我对类的比较感到困惑。

问题是我的 div 和那些按钮一样具有动态类，所以我不知道什么匹配，直到它们位于 DOM 中。

Answer 1

一个版本是为文档中的每个类创建一个单击函数。这看起来像这样:

$('.valueA').click(function() {
  $('.valueA').addClass('active')
})
$('.valueB').click(function() {
  $('.valueB').addClass('active')
})
$('.valueC').click(function() {
  $('.valueC').addClass('active')
})

但是这是重复的代码，应该避免。因此，您可以创建一个函数，将单击处理程序添加到所有按钮(这是我编写的示例)，然后检索附加到该元素的类。然后，它循环遍历类数组，并向具有该类的每个元素添加另一个元素。

$('button').click(function() {
    var classes = $(this).attr('class').split(' ')
  classes.forEach(function(elem) {

    $('.' + elem).addClass('active');
  })
})

现在，如果您想限制该类的应用，那么您可以在 之前添加该类应应用的元素类型。

$('button.' + elem).addClass('active');

或

$('div.' + elem).addClass('active');