На сайте несколько выпадающих списоков. Кликаешь по select__title, появляется select__dropdown. В каждом select__dropdown есть li, при клике на li к this li добавляется active, а у всех других в данном select__dropdown, active убирается. Соответственно активность в каждом select__dropdown независима от других. Код уже написан, но используя дублирование, с чем я не могу смириться. То есть представленный jQuery код ctrl+c + ctrl+v но с разными переменными. Как можно использовав минимум кода это переписать, чтобы избежать дублирования. Создавал массив c .filter__select_age li, .filter__select_country li... Потом этот масив перебирал с помощью each() и вместо переменной на которую повешено событие ставил this, тоже самое с span, но безуспешно. Про $(this).not(this) я промолчу). Хелп, ай нид самбади
HTML:
`<div class="filter__select filter__select_age">
<div class="select__title">
<span>Любой возраст</span>
<i class="fas fa-caret-down"></i>
</div>
<div class="select__dropdown">
<ul class="select__list">
<li class="active">Любой возраст</li>
<li>0+</li>
<li>6+</li>
<li>12+</li>
<li>16+</li>
<li>18+</li>
</ul>
</div>
</div>`
CSS:
`.select__list li.active {
background-color: #007aff;
}`
jQuery:
`$('.filter__select_age li').click(function () {
$('.filter__select_age li').not(this).removeClass('active');
$(this).addClass('active');
$('.filter__select_age .select__title span').html($(this).html());
});`
Решение:
const selectAll = $('.filter__select li');
selectAll.click(function () {
$(this).closest('.filter__select').find('li').removeClass('active');
$(this).addClass('active');
let selectTitle = $(this).text();
$(this).closest('.filter__select').find('.select__title span').text(selectTitle);
});