Question

我发现自己做了很多事情：

$(document).on("click","li",function(){
    $(".selected").removeClass("selected"); // Remove any old selected
    $(this).addClass("selected"); // Apply selected to this element
});

是否有更好，更少重复的方式来完成这样的任务？喜欢切换课程。顺便说一句，在给定时间只能选择一个元素。

感谢。

Answer 1

更有效的方法是跟踪最后选择的项目：

var $selected = null;

$(document).on("click", "li", function() {
    if ($selected) {
        $selected.removeClass('selected');
    }
    $selected = $(this).addClass('selected');
});

当然，只要该特定函数是唯一一个添加/删除selected类的函数，这应该可以工作。

可以选择将其包装在闭包内以删除$selected变量。

顺便说一下，使用document作为你的代表团的主播不是最好的做法。最好选择不会从文档中删除的最近节点。

<强>更新

由于Kevin B有mentioned，您可以像这样消除分支：

var $selected = $();

$(document).on("click", "li", function() {
    $selected.removeClass('selected');
    $selected = $(this).addClass('selected');
});

1.4中引入了使用$()的能力;在此之前，您将使用$([])。

Answer 2

你可以这样做：

<script>
  $(document).ready(function(){
     $(this).on("click", "li", function() {
        $(this).addClass('selected').siblings().removeClass('selected');
     });
  });
</script>

Answer 3

考虑到这一点，您可以将列表元素保存在变量中，例如：

var $liElements = $('#yourContainer > li');

$(document).on("click","li",function(){
    $liElements.not($(this)).removeClass("selected");
    $(this).addClass("selected");
});

Answer 4

跟踪当前元素的概念与其他答案相同，但您可以将此逻辑干净地包含在诸如

之类的函数中

function class_swapper=function(cls){
    var cur;
    return function(elt){
        if (cur) { cur.classList.remove(cls); }
        elt.classList.add(cls);
        cur=elt;
    };
};

对class_swapper的调用返回一个函数，该函数用于将指定的类实际应用于特定元素（并将其从前一个元素中删除，这在函数内部被记住）。您可以按如下方式使用它：

var swapper=class_swapper("selected");
swapper(elt1);
swapper(elt2);

或就您的示例而言

$(document).on("click","li",function(){swapper(this);});

我使用了classList.add和classList.remove，这是在现代浏览器中操作类的经典方式（ouch），但当然这些可以被jQuery的addClass等替换。必要时。

Answer 5

与杰克辩论后，我提出了我的意见。假设你的清单在这里：

var $myList = $('#list');

然后：

$myList.on("click","li",function(){
    $(".selected",$myList).removeClass("selected"); // Remove any old selected
    $(this).addClass("selected"); // Apply selected to this element
});

或

$myList.on("click","li",function(){
    $(this).siblings(".selected").removeClass("selected"); // Remove any old selected
    $(this).addClass("selected"); // Apply selected to this element
});

你做这件事的方式对我来说已经足够了，但杰克的速度更快，我的两者之间也是如此。我喜欢这个，因为你不需要假设只有一个selected元素。据我所知，当我们提供上下文时，搜索速度会更快

在选定的类之间切换

5 个答案: