Question

这里我选择列表中的li项目并更改该项目的边框，但如果我选择另一个li项目，则当前所选项目的边框正在更改，但之前选择的li项目边框颜色必须更改为原色

这是我的代码

 $(document).ready(function () {
        $("#list3 li").click(function () {
            $("list3 li.clicked").removeClass("clicked");
            $(this).addClass("clicked");
            $(".clicked").css("border", "3px solid red");

        });
  });

有什么建议吗？

Answer 1

将类clicked的CSS定义添加到页面的外部CSS文件或<style>标记内，如下所示：

.clicked {
    border: 3px solid red;
}

这样CSS可以为你处理样式，一旦删除了类，边框就会自动恢复到之前的状态。

Answer 2

$(document).ready(function () {
        $("#list3 li").click(function () {
            $("#list3 li").css("border", "none");
            $(this).css("border", "3px solid red");

        });
  });

Answer 3

$(document).ready(function () {
  $("#list3 li").click(function () {
    $("#list3 li.clicked").toggleClass("clicked");
    // if you don't want to be able to deselect the li that is already selected
    // add this 
    // if (!$(this).hasClass("clicked")) {
      $(this).toggleClass("clicked");
    // }
 });
});

和css样式规则：

.clicked {
  border: 3px solid red;
  ... extra customization
}

Answer 4

这应该有效

$(document).ready(function () {
        $("#list3 li").click(function () {
            $("list3 li.clicked").css("border","0");
            $("list3 li.clicked").removeClass("clicked");
            $(this).addClass("clicked");
            $(".clicked").css("border", "3px solid red");

        });
  });

或者，您可以将border属性放在.clicked类中。

Answer 5

该行：

 $(".clicked").css("border", "3px solid red");

不会更新＆＃34;点击＆＃34;的样式。它只会改变所选元素的样式，即$(this)。

您最好为.clicked添加css规则：

.clicked {
    border: 3px soild red;
}

从您的javascript中删除原始行：

$(document).ready(function () {
    $("#list3 li").click(function () {
        $("list3 li.clicked").removeClass("clicked");
        $(this).addClass("clicked");
    });
});

然后使用addClass（）和removeClass（）函数自动进行样式更改。

Answer 6

您可以使用更少的代码实现此目的。写得像这样：

$("#list3 li").click(function () {
            $("#list3 li").removeClass('clicked');
            $(this).addClass('clicked');

        });

选中此http://jsfiddle.net/q4qR8/1/

如何使用jquery选择和取消选择li项目？

6 个答案: