JQuery для изменения цвета фона выбранного элемента списка

Question

У меня есть неупорядоченный список, и я хотел бы изменить цвет фона каждого элемента, когда этот элемент выбран (элементы в списке являются тегами ссылок), вот код JQuery, который у меня есть так далеко.

$(".cat").click(function(){ 
    if ($('.cat').is(":selected")) { 
     $(this).css("background-color", "#1796cf"); 
    } else { 
     $(this).css("background-color", "#333333"); 
    } 
}); 

HTML код выглядит следующим образом:

<ul class="categories"> 
    <li class="cat"><a href="#">K-12</a></li> 
    <li class="cat"><a href="#">Higher Education</a></li> 
    <li class="cat"><a href="#">Healthcare</a></li> 
    <li class="cat"><a href="#">Corporate</a></li> 
    <li class="cat"><a href="#">Recreation</a></li> 
    <li class="cat"><a href="#">Community</a></li> 
    <li class="cat" style="border:none"><a href="#">Faith Based</a></li> 
</ul> 

.cat класс для каждого элемента в моем неупорядоченном списке. Проблема в том, что он всегда запускает мое заявление else. Какой селектор следует использовать для ссылки, когда ссылка выбрана в тот момент? Я попытался использовать focuson() вместо click(), но с другими элементами на странице это не будет работать так, как я этого хочу.

Answer 1

Подход 1 - Минимальное изменение

$(".cat").click(function(){ 
    if ($(this).css("background-color") === "#333333") { 
     $(this).css("background-color", "#1796cf"); 
    } else { 
     $(this).css("background-color", "#333333"); 
    } 

}); 

Объяснение - элемент "литий" не выбрано свойство, следовательно, ваш код не работает. Вы можете просто проверить свойство background-color и переключить его.

подход 2 - Некоторые, что больше изменений, но чистый код

Вы также можете упростить код.

Обновление вашего скрипта

$('.cat').on('click', function(){ 
     $(this).toggleClass('background_selected'); 
    }); 

Добавить это в CSS

.cat { 
    background-color : #333333; 
} 

.background_selected { 
    background-color : #1796cf; 
} 

С выше, вы будете иметь все Ли, имеющий фон # 333333. И событие click переключает другой класс, который переопределяет свойство background-color на # 1796cf. Единственное, что вам нужно сделать, это стиль .background_selected должен быть после стиля .cat в вашем файле css.

Я надеюсь, что оба подхода понятны.

Новое требование - выберите только один элемент за раз.

$('.cat').on('click', function(){ 
    $('.cat').removeClass('background_selected'); 
    $(this).addClass('background_selected'); 
}); 

Пожалуйста, обратите внимание, что это не будет делать ничего, если нажать на выбранный элемент. Однако, если вам нужно также переключить класс на выбранный элемент, и я хочу отменить его при щелчке, вам понадобится следующий код.

$('.cat').on('click', function(){ 
    var isAlreadySelected = $(this).hasClass('background_selected'); 
    $('.cat').removeClass('background_selected'); 
    if(!isAlreadySelected) { 
     $(this).addClass('background_selected'); 
    } 
});