Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Добавление класса к ссылке (https://javascript.ru/forum/jquery/66075-dobavlenie-klassa-k-ssylke.html)

DeminEvgen 23.11.2016 23:03
Добавление класса к ссылке
 
Вообщем есть вот такой простой скрипт
Код:
jQuery(function($) { 
    $(document).ready(function() {
        $("a.show-block").click(function() {
            if ( $( "#sp-top-bar,#sp-section-1" ).is( ":hidden" ) ) {
                $( "#sp-top-bar,#sp-section-1" ).slideDown( "slow" );
              } else {
                $( "#sp-top-bar,#sp-section-1" ).slideUp();
              }
        });
    });
});
Работает отлично, прячет блок, и наоборот.
Вообщем хотелось бы для "a.show-block" добавить классы:class1, class2 в зависимости от состояния блока. Ну то есть, блок открыт - class1, блок скрыт - class2.
Пытался сделать что то вроде этого:
Код:
jQuery(function($) { 
    $(document).ready(function() {
        $("a.show-block").click(function() {
            if ( $( "#sp-top-bar,#sp-section-1" ).is( ":hidden" ) ) {
                $("a.show-block").addClass("test1")
                $( "#sp-top-bar,#sp-section-1" ).slideDown( "slow" );
              } else {
                $("a.show-block").addClass("test2")
                $( "#sp-top-bar,#sp-section-1" ).slideUp();
              }
        });
    });
});
Но классы применяются сразу оба.
Не подскажете как мне это реализовать?
Там removeClass нужно использовать?
Сделал так:
Код:
jQuery(function ($) {
    $(document).ready(function () {
        $("a.show-block").click(function () {
            if ($("#sp-top-bar,#sp-section-1").is(":hidden")) {
                $("a.show-block").removeClass("class2")
                $("a.show-block").addClass("class1")
                $("#sp-top-bar,#sp-section-1").slideDown("slow");
            }
            else {
                $("a.show-block").addClass("class2")
                $("a.show-block").removeClass("class1")
                $("#sp-top-bar,#sp-section-1").slideUp();
            }
        });
    });
});
ну и самой ссылки задал начальный class1
Теперь классы при нажатии чередуются.
Но мне кажется, что это всё очень криво))) Подскажите правильно ли я сделал?

dd_smol 24.11.2016 00:28 
jQuery(function($) {
    $('a.show-block')
        .addClass('class1')
        .click(function (e) {
            $('#sp-top-bar,#sp-section-1').slideToggle('show');
            $( e.target ).toggleClass('class1 class2');
        });
});


Часовой пояс GMT +3, время: 23:26.