Использование toggleClass при клике — jQuery

Я очень новичок в jQuery.

У меня есть две вкладки меню, и я пытаюсь получить вкладку «a», чтобы переключать (переключать) классы с помощью вкладки «b» при нажатии.

Использование метода .attr не работает. Я также пытался переключить его с помощью toggleClass, но все равно ничего.

// toggle between login / register
$(".static-color").click(function() {
    $("#login").hide(); 
    $("#register").show();

    $(this).attr("active-color");
    $(".active-color").attr("static-color");

});

// toggle between login / register
$(".active-color").click(function() {
    $("#login").show();
    $("#register").hide();

    $(this).attr("static-color");
    $(".static-color").attr("active-color");
});

http://jsfiddle.net/h3Y6G/


jquery toggleclass
person Kyle    schedule 09.12.2013    source источник
comment
jsfiddle.net/h3Y6G/6 я обновил; переключение класса; если вы можете использовать идентификатор для входа и регистрации, это будет легко. это тоже работает. Добавлены строки while $(.active-color).removeClass(active-color).addClass(static-color); $(это).removeClass(статический-цвет).addClass(активный-цвет); переключение.   -  person user1769790    schedule 09.12.2013

Ответы (3)


arrow_upward
1
arrow_downward

Что вы на самом деле делаете с .attr, так это просто получаете значение предполагаемого static-colorатрибута, которого не существует. .

Хитрость заключается в использовании .addClass .removeClass или в данном случае .toggleClass.

У меня есть еще один совет: используйте делегирование событий с помощью метода jQuery .on. Это позволит более гибко обрабатывать события. На самом деле вы прикрепляете прослушиватель к родительскому элементу, который будет прослушивать события, поступающие от другого элемента, соответствующего указанному селектору, например:

$("#login-register").on('click', '.static-color', function() {
    $('.active-color, .static-color').toggleClass("active-color static-color");
    $("#login, #register").toggle();
});

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

Я обновил вашу скрипку: http://jsfiddle.net/h3Y6G/1/

person Johan Lindskogen    schedule 09.12.2013

arrow_upward
1
arrow_downward

Я бы предложил использовать класс button в качестве селектора для переключения классов и удалить класс static. Вы можете предположить, что если ваша кнопка не является «активной», то неявно она будет «статической», и вы должны соответствующим образом стилизовать их.

Попробуй это:

$('.button').click(function() {
    // remove active class from all buttons
    $('.button').removeClass('active-color');
    // add it to the current clicked button
    $(this).addClass('active-color');
    // get button type and deal with content accordingly
    var button_type = $(this).text().trim();
    if(button_type == "Register") {
        $("#register").show();   
        $("#login").hide();
    } else if(button_type == "Log-In") {
        $("#login").show();
        $("#register").hide();
    }
});

JSFiddle: http://jsfiddle.net/h3Y6G/2/

person scrowler    schedule 09.12.2013

arrow_upward
0
arrow_downward

«активный цвет» не является атрибутом.

Не могли бы вы вместо этого переключить CSS или класс?

$(this).attr("active-color");

становится

$(this).addClass('active-color').removeClass('static-color');

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

$(this).addClass('static-color').removeClass('active-color');
person Sablefoste    schedule 09.12.2013
comment
а остальные кнопки...? - person scrowler; 09.12.2013