Добавить класс элементы, входящие с таким же классом соответствия согласно щелкнули элемент

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

Вы должны получить имя класса DIV с помощью .attr() и использовать имя класса в селекторе.

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

Получить имя вашего класса дивы и добавить свой .active класс ко всем кнопкам, используя селектор Corret $('button.valueB').

Так динамическое решение может выглядеть следующим образом

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

Demo