JQuery 更改所选列表项的背景颜色

Question

我有一个无序列表，我想在选择该项目时更改每个项目的背景颜色（列表中的项目是 link 标签）这是我的 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 是我无序列表中每个项目的 class。问题是它总是运行我的 else 语句。当 link 是当时选择的那个时，我应该使用什么选择器来引用？我尝试使用 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" 元素未选择属性，因此您的代码无法正常工作。您可以简单地检查背景颜色属性并切换它。

方法 2 - 有更多变化但更清晰的代码

您还可以简化代码。

将您的脚本更新为

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

将此添加到您的 css

.cat {
  background-color : #333333;
}

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

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

我希望两种方法都清楚。

新要求 - Select 一次只有一个元素。

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

请注意，如果您单击所选元素，这将不会执行任何操作。但是，如果您也需要在所选元素上切换 class 并且我想在单击时取消选择它，那么您将需要以下代码。

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

JQuery 更改所选列表项的背景颜色

JQuery to change background color of selected list item

css

jquery

html-lists