Удалить выбранный класс jquery - PullRequest
2 голосов
/ 26 июля 2011

У меня есть следующий 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;
            });
        });

Проблема в том, что после того, как я нажимаю на какую-либо ссылку, предыдущаяодин, который я нажал, не отменяет выбор (удалить выбранный класс).Любая помощь будет принята с благодарностью.

Ответы [ 4 ]

4 голосов
/ 26 июля 2011

вы можете сделать:

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

                return false;
            });
        });

Ближайший не работает в вашем примере, потому что он идет вверх по дереву DOM

4 голосов
/ 26 июля 2011

Вы можете сначала удалить все элементы, для которых выбран класс, а затем применить выбранный класс к текущему.

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

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

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

    return false;
});
1 голос
/ 26 июля 2011

Ваше использование .closest не правильно, я не думаю.Помните, что .closest смотрит на себя, затем поднимается по дереву на совпадение.Итак, в вашем случае, он сначала находит себя, а затем (внутри) сам ищет привязку с примененным выбранным классом.(Насколько я понимаю, ваш код должен применять и удалять выбранный класс к себе.)

Вместо этого вы можете попробовать .siblings.Тем не менее, я бы предложил следующее вместо:

$('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') является слишком широким и может захватывать ссылки на странице, которую вы размещаетене хочуВозможно, я ошибаюсь, но это сохраняет его в текущей части навигации на вашей странице (по крайней мере, в том же контейнере, в котором находятся все эти якоря).

1 голос
/ 26 июля 2011

Я бы попробовал следующее:

$(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;

    })
 }
...