включение / выключение классов по нескольким ссылкам

0

Кажется, я не могу найти именно эту проблему на SE. У меня есть ряд ссылок в списке. При щелчке ссылки добавляется активный класс. Если нажата другая ссылка, я хочу, чтобы она активировалась, а предыдущая активная ссылка неактивна.

<li>
    <div class="yearaction year1">
        <a href="#" class="gotoslide inactiveyear" id="year1"></a>
    </div>
    2007
</li>
<li>
    <div class="yearaction year2">
        <a href="#" class="gotoslide inactiveyear" id="year2"></a>
    </div>
    2008
</li>
<li>
    <div class="yearaction year3">
        <a href="#" class="gotoslide inactiveyear" id="year3"></a>
    </div>
    2009
</li>
.
.
.

$(".gotoslide").click(function(){
   $(this).toggleClass("activeyear inactiveyear");
});

Эта реализация не влияет на другие ссылки. Как я могу правильно работать с этим переключателем?

  • 0
    Ваш код выглядит правильно. Не могли бы вы проверить, если ваша консоль показывает ошибку?
  • 0
    Я не уверен, если вы можете переключать два или более классов одним вызовом, попробуйте $(this).toggleClass("activeyear").toggleClass("inactiveyear"); ,
Теги:

6 ответов

2
Лучший ответ

Ты почти там. Это приведет к переключению классов по ссылке, на которую вы нажимаете. Чтобы также переключить их на тот, на который вы ранее нажали:

$(".gotoslide").click(function(){
    // previously active
    $(".activeyear").toggleClass("activeyear inactiveyear");
    $(this).toggleClass("activeyear inactiveyear");
});
  • 0
    Это хорошо, но может быть даже короче: $(".activeyear").add(this).toggleClass("activeyear inactiveyear");
  • 0
    @dfsq Это хороший ярлык в обычном случае, но он потерпит неудачу, если два последовательных события click будут отправлены одному и тому же элементу.
Показать ещё 1 комментарий
0

Вы должны переключать его индивидуально. Хорошим обходным путем является подключение data- * к каждой ссылке.

<a href="#" class="gotoslide inactiveyear" id="year1" data-year="1"></a>
<a href="#" class="gotoslide inactiveyear" id="year2" data-year="2"></a>

затем

$(".gotoslide").click(function(){
    $(this).toggleClass("activeyear inactiveyear");
    var year = parseInt($(this).data('year')) - 1;
    $('#year' + year).toggleClass("activeyear inactiveyear");
});
0

Это не влияет на другие ссылки, потому что, используя:

$(this)

вы ссылаетесь только на этот конкретный экземпляр класса.gotoslide (тот, который был нажат).

Чтобы затронуть все остальные элементы классом.gotoslide, обратитесь к ним с помощью:

$('.gotoclass')
0

Вы можете попробовать это, просто переключите один класс (активный) с использованием метода.toggleClass(). Таким образом, вы можете предположить, что неактивное состояние не имеет класса активных и использует CSS для их стиля соответственно. Это проверит другой активный элемент, если он есть, удаляет активный класс и делает его активным.

    $(document).on('click','.gotoslide', function (e) {
        if($('.gotoslide.active').length) {
            $('.gotoslide.active').removeClass('active');
        }
        $(this).toggleClass('active');
    });
0

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

Вместо того, чтобы переключать классы, более безопасный способ сделать это задает классы явно для того, что они должны быть с removeClass и добавить класс. Сначала установите все элементы $ ('. ActiveYear') (предположительно только один) на неактивный, а затем установите ссылку на ссылку 'inactiveyear'

$(".gotoslide").click(function(e){
  e.preventDefault();

  $(".activeyear").removeClass("activeyear").addClass("inactiveyear");

  $(this).toggleClass("activeyear inactiveyear");
});

Рабочий пример: http://jsfiddle.net/hVLML/4/

0

Это немного зависит от того, что должно произойти, когда вы дважды нажимаете одну и ту же цель и как вы настроили эти классы. Я думаю, что эта линия мышления может помочь вам:

$(".gotoslide").click(function () {
    $(".gotoslide").removeClass("activeyear"); // removes .activeyear from all items
    $(this).addClass("activeyear"); // add .activeyear to this specific item
});

Ещё вопросы

Сообщество Overcoder
Наверх
Меню