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

【问题标题】：Add class to elments with same matching class as per clicked element根据单击的元素将类添加到具有相同匹配类的元素
【发布时间】：2017-03-19 09:23:20
【问题描述】：

我需要将.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 之前我不知道什么匹配。

【问题讨论】：

标签： javascript jquery html classname

【解决方案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>

【讨论】：

谢谢，我的问题写得不对，现在更新。问题是 div 中的类是动态的，所以我不知道，但它会匹配按钮中的类
className 是一个属性，不需要定义。 See this@rob.m

【解决方案2】：

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

$("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>

【讨论】：

【解决方案3】：

使用正确的选择器 $('button.valueB') 获取您的 div 类的名称并将您的 .active 类添加到您的所有按钮中。

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

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

Demo

【讨论】：

【解决方案4】：

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

$('.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');

【讨论】：

它不会也向按钮添加一个活动类吗？没关系，只是问问
是的，它会的。编辑了我的回复以提供更多选择。