Я пытаюсь объявить переменную для выбора кнопки из группы btn. У меня есть 2 группы кнопок, и мне сложно отделить их друг от друга в моем коде. Приведенный ниже код работает для одной группы кнопок, но у меня есть две отдельные группы кнопок на одной странице, и этот код позволит мне выбрать только одну кнопку между обеими btn-группами. Я хотел бы иметь возможность выбирать одну кнопку для каждой группы btn (отображается только одна группа btn, другая аналогична, но с другим именем / идентификатором).
Есть ли способ сделать выбор на основе идентификатора группы btn?
HTML:
<div name = "severitButtons" id = "severitButtons" class = "btn-group btn-group-justified">
<!-- start buttons -->
<!-- Very Negative -->
<label id = "very-low" btn-radio = "option.value.toString()"
uncheckable = "" class = "btn btn-default ng-pristine ng-untouched ng-valid">
Very low
<div class = "accent-border accent-border-very-low"></div>
</label>
<!-- Negative -->
<label id = "low" btn-radio = "option.value.toString()"
uncheckable = "" class = "btn btn-default ng-pristine ng-untouched ng-valid ng valid-parse">
Low
<div class = "accent-border accent-border-low"></div>
</label>
<!-- Neutral -->
<label id = "moderate" btn-radio = "option.value.toString()" uncheckable = "" class = "btn btn-default ng-pristine ng-untouched ng-valid">
Medium<div class = "accent-border accent-border-medium"></div>
</label>
<!-- Positive -->
<label id = "high" btn-radio = "option.value.toString()"
uncheckable = "" class = "btn btn-default ng-pristine ng-untouched ng-valid">
High<div class = "accent-border accent-border-high"></div>
</label>
<!-- Very Positive -->
<label id = "very-high" btn-radio = "option.value.toString()"
uncheckable = "" class = "btn btn-default ng-pristine ng-untouched ng-valid">
Very high<div class = "accent-border accent-border-very-high"></div>
</label>
<!-- end buttons -->
</div>
JS:
<script>
var selector = '.btn-group label';
$(selector).on('click', function(){
$(selector).removeClass('active');
$(this).addClass('active');
});
</script>



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Если идентификаторы двух групп кнопок различаются, вы можете использовать идентификатор в селекторе для различения.
<script>
var selector = '#severitButtons label, #severitButtons2 label';
$(selector).on('click', function(){
$(selector).removeClass('active');
$(this).addClass('active');
});
</script>
Мне пришлось создать две переменные селектора и разделить функции, но это сработало. Спасибо.
Повторное использование
$(selector)будет работать, но добавит большие накладные расходы. Для элемента каждый, который он находит как часть событияclick, он затем срабатывает и удаляет класс для ВСЕХ элементов. (Если вы нашли 10 элементов, removeClass сработает 100 раз). Лучше бы как другой$(this)