根据单击的元素将 class 添加到具有相同匹配 class 的元素

Question

我需要添加一个 .active class 到任何匹配任何 classes 的按钮，根据我正在点击的 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()，但我对 class 的比较感到困惑。

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

Answer 1

您不需要使用 .each()。你可以像下面那样做。

$("div").on("click", function() {
    $('button.active').removeClass('active');
    $('button.' + this.className).addClass('active');
});

.active {
    background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="valueA">A</button>
<button class="valueB">B</button>
<button class="valueC valueB">C</button>

<div class="valueA">DIV A</div>
<div class="valueB">DIV B</div>
<div class="valueC">DIV C</div>

Answer 2

您需要使用 .attr() 获取 div 的 class 名称，并在选择器中使用 class 名称。

$("div").on("click", function() {
    var className = $(this).attr("class");
    $('button.'+ className).addClass('active');
});

.active { color: red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="valueA">A</button>
<button class="valueB">B</button>
<button class="valueC valueB">CB</button>
<div class="valueB">B</div>

Answer 3

获取 div 的名称 class 并使用正确的选择器 $('button.valueB').

将 .active class 添加到所有按钮

所以动态解决方案可能如下所示

$("div.valueB").on("click", function(e) {
  var className = e.target.className;
  $('button.' + className).addClass('active');
});

Demo

Answer 4

一个版本是为文档中的每个 class 创建一个点击功能。这看起来像这样：

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

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

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

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

现在，如果您想限制上述 class 的应用，那么您可以在 .

之前添加 class 应该应用的元素类型

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

或

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

根据单击的元素将 class 添加到具有相同匹配 class 的元素

Add class to elments with same matching class as per clicked element

html

javascript

jquery

classname