Question

我有以下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;
            });
        });

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

Answer 1

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

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

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

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

    return false;
});

Answer 2

你可以这样做：

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

                return false;
            });
        });

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

Answer 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;

    })
 }

Answer 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')过于宽泛，可能会抓住您不想要的页面上的链接。我可能错了，但这会将其保留在页面的当前导航部分内（至少在所有这些锚点所在的同一容器内）。

删除选定的类jquery

4 个答案: