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

Answer 2

您无需使用.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 3

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

Right()

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

.active { color: red }

Answer 4

获取divs类的名称，并使用corret selector .active将$('button.valueB')类添加到所有按钮。

所以动态解决方案看起来像这样

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

Demo

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

4 个答案: