5

我发现自己经常这样做：

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

有没有更好、更少重复的方法来完成这样的任务？就像切换一个类。顺便说一句，在给定时间只能选择一个元素。

谢谢。

4

5 回答 5

6

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

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 中引入的；在此之前你会使用$([]).

于 2013-05-15T15:27:04.220 回答
2

你可以这样做：

<script>
  $(document).ready(function(){
     $(this).on("click", "li", function() {
        $(this).addClass('selected').siblings().removeClass('selected');
     });
  });
</script>
于 2013-05-15T15:29:51.157 回答
1

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

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

$(document).on("click","li",function(){
    $liElements.not($(this)).removeClass("selected");
    $(this).addClass("selected");
});
于 2013-05-15T15:35:54.387 回答
1

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

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.addand classList.remove，这是一种在现代浏览器中操作类的经典方式（哎哟），但当然这些可以根据需要被 jQueryaddClass等替换。

于 2013-05-15T15:48:25.607 回答
1

在与杰克辩论后，我提出了我的建议。假设您的清单在这里：

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元素。据我所知，当我们提供上下文时，搜索会更快

于 2013-05-27T15:45:36.680 回答