javascript - 管理选定状态

Question

我有<ul>一个包含一些 li 元素的元素：

<ul id="ul">
  <li id="li1"></li>
  <li id="li2"></li>
  <li id="li3"></li>
</ul>

我想要：

1. <li>当我单击它时将“选定”类添加到元素
2. 清除所有<li>元素中的所有“选定”类属性，除了<li>刚刚单击的元素

问题：

我怎样才能做到这一点？

Answer 1

这很简单（小提琴）：

<ul id="ul">
  <li>Item 1</li> <!-- id is unnecessary here -->
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script type="text/javascript">
    $('#ul>li').click(function() {
        $(this).addClass('selected'); // set "selected" class to clicked item
        $(this).siblings().removeClass('selected'); // remove "selected" class from other li's
    });
</script>

Answer 2

这是一个jsFiddle

CSS

  p { margin: 4px; font-size:16px; font-weight:bolder;
      cursor:pointer; }
  .blue { color:blue; }
  .highlight { background:yellow; }

HTML

  <p class="blue">Click to toggle</p>
  <p class="blue highlight">highlight</p>
  <p class="blue">on these</p>
  <p class="blue">paragraphs</p>

JS

    $("p").click(function () {
    $(".highlight").removeClass("highlight")
      $(this).toggleClass("highlight");
    });

Answer 3

只是一个样本，可以帮助您上路。检查this fiddle以获取带有jQuery的示例。对于纯 JS 版本（没有 jQuery），请单击此处。

以下是您必须做的事情才能实现您想要的。

1. 创建一个 CSS 类（比如selected）并向其中添加您的规则（如下所示）。

CSS

.selected{
    background-color: black;
    color: white;
}

1. 使用 jQuery，为您的元素创建一个click事件处理程序。li
2. 每当单击一个元素时，使用removeClass()方法selected从所有元素中删除该类li。然后使用addClass()方法selected仅将类添加到li已单击的元素中。

JS

$(document).ready(function(){
    $('#ul li').click(function(){
        $('#ul li').removeClass('selected');
        $(this).addClass('selected');
    });
});

Answer 4

一个可能的解决方案：

$(document).ready(function (e) {
    $("#ul li").click(function () {
        $("#ul").children().removeClass("select");
        $(this).addClass("select")
    })
});