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

通过上述内容，您将拥有所有具有＃333333背景的li。然后单击事件将另一个覆盖background-color属性的类切换为＃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');
    }  
});

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

1 个答案: