删除选定的类 jquery答案

【问题标题】：Remove selected class jquery删除选定的类 jquery
【发布时间】：2011-10-12 21:51:16
【问题描述】：

我有以下 HTML：

<a href="#">img/a.jpg</a>
<a href="#">img/b.jpg</a>
<a href="#">img/c.jpg</a>

对于选定的链接，我有以下内容：

$(function() {
            $("a").click( function( )
            {
            var current = $(this);
            var name = current.attr('href');
            current.addClass("selected");
            var prev = current.closest("a").find("a.selected");
            prev.removeClass("selected");
                return false;
            });
        });

问题是，在我单击某个链接后，我单击的上一个链接不会取消选择（删除已选择的类）。任何帮助将不胜感激。

【问题讨论】：

标签： jquery html class select scripting

【解决方案1】：

您可以先删除所有具有 selected 类的元素，然后将您选择的类应用于当前类。

$("a").click(function( {
    var current = $(this);
    var name = current.attr('href');

    //Remove all
    $('.selected').removeClass('selected');

    //Add to current
    current.addClass("selected");

    return false;
});

【讨论】：

好答案，请修正语法错误。在第一行有： function( 而不是 function()

【解决方案2】：

你可以这样做：

$(function() {
            $("a").click( function( )
            {
            var current = $(this);
            var name = current.attr('href');
            $('a.selected').removeClass('selected');
            current.addClass("selected");

                return false;
            });
        });

closest 在您的示例中不起作用，因为它会上升到 DOM 树

【讨论】：

它不仅会上升（就像.parent() 一样），它还会从自身开始。因此，“prev”元素将始终使用 .closest() 调用本身（至少在它到达 .find() 之前它找不到匹配项并失败）。

【解决方案3】：

我会尝试以下方法：

$(function() {
     $("a").click( function() {

         //GEt the current element
         var current = $(this);
         var name = current.attr("href");

         //Remove the class from the previous element
         $('.selected').removeClass("selected");

         //Add the class to the current element
         current.addClass("selected");

         //Let's get back to work!
         return false;

    })
 }

【讨论】：

【解决方案4】：

我不认为您对.closest 的使用不正确。请记住，.closest 会先查看自己，然后再向上查找匹配项。因此，在您的情况下，它首先找到自己，然后在自身（内部）寻找应用了所选类的锚。（当我读到它时，您的代码应该将所选类应用到/从其自身中删除。）

您可能想改用.siblings。也就是说，我建议改为the following：

$('a').click(function(e){
    // store the current anchor
    var $a = $(this);

    // add the selected class to this element
    $a.addClass('selected');

    // look around to links nearby, with the selected class, and remove that class
    $a.siblings('a.selected').removeClass('selected');

    // prevent further action
    e.preventDefault(); return false;
});

我觉得使用通用的$('a.selected') 或$('.selected') 过于宽泛，可能会抓取您不想要的页面上的链接。我可能是错的，但这会将其保留在页面的当前导航部分中（至少在所有这些锚点所在的同一容器中）。

【讨论】：