在选定的类之间切换

Toggle between selected classes

本文关键字：之间      更新时间：2023-09-26

我发现自己经常这样做:

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

有没有更好的、更少重复的方法来完成这样的任务?比如切换一个类。顺便说一句，每次只能选择一个元素。

谢谢。

更有效的方法是跟踪最后选中的项目:

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

当然，只要这个特定的函数是唯一会添加/删除selected类的函数，这应该是有效的。

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

顺便说一句，使用document作为您的委托的锚不是最佳实践。最好选择不会从文档中删除的最近的节点。

正如Kevin B所提到的，您可以像这样消除分支:

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

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

你可以这样做:

<script>
  $(document).ready(function(){
     $(this).on("click", "li", function() {
        $(this).addClass('selected').siblings().removeClass('selected');
     });
  });
</script>
与Jack辩论后，我提出了我的建议。假设您的列表在这里: 
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元素。据我所知，当我们提供上下文时搜索会更快

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

var $liElements = $('#yourContainer > li');
$(document).on("click","li",function(){
    $liElements.not($(this)).removeClass("selected");
    $(this).addClass("selected");
});

跟踪当前元素的概念与其他答案相同，但是您可以将此逻辑清晰地包装在一个函数中，例如

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，这是在现代浏览器中操作类的一种优雅的方式(哎)，但当然这些可以被jQuery的addClass等替代。

相关文章：