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");
    }

});

说明 - “li”元素没有选中属性，因此您的代码无法正常工作。您可以简单地检查 background-color 属性并切换它。

方法 2 - 更多变化但更简洁的代码

您还可以简化代码。

将您的脚本更新为

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

在你的CSS中添加这个

.cat {
  background-color : #333333;
}

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

通过以上，您将拥有所有 li 的背景为#333333。并且单击事件将另一个覆盖背景颜色属性的类切换为#1796cf。您唯一需要确保的是 .background_selected 样式应该在您的 css 文件中的 .cat 样式之后。

我希望这两种方法都很清楚。

新要求 - 一次只能选择一个元素。

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