替换为jQuery中的Toggle

时间:2014-12-30 09:19:59

标签: javascript jquery

DEMO

我想要实现的目标...... 如果用户单击第一个列表项,则添加 - background 如果用户AGAIN点击相同的列表项 - 背景应该被删除

没有发生。有人可以看看这个..我也试过toggleClass,但它没有工作..

谢谢!

ageUrl = "";

$('.ageUrl li a').on('click', function(e){
    e.preventDefault();
    ageUrl  = $(this).attr("href");

    if($(this).hasClass('selectedBg')){
        $('.ageUrl li, .ageUrl li a').removeClass('selectedBg');
    }
    else {
        //$(this).addClass('selectedBg');

        $('.ageUrl li, .ageUrl li a').removeClass('selectedBg');
        $(this).closest('li').addClass('selectedBg');
        //$(this).closest('li').toggleClass('selectedBg')
        console.log(ageUrl);
    }
});

$('.crossIconSel').on('click', function(){
    alert('hi');
    $('.ageUrl li, .ageUrl li a').removeClass('selectedBg, crossIconSel');  
});

3 个答案:

答案 0 :(得分:1)

Demo Fiddle试试这个

 $('.ageUrl li a').on('click', function(e){
            e.preventDefault();
            ageUrl  = $(this).attr("href");

            if($(this).parent('li').hasClass('selectedBg')){
                $('.ageUrl li, .ageUrl li a').removeClass('selectedBg');
            }
            else {
                //$(this).addClass('selectedBg');

                $('.ageUrl li, .ageUrl li a').removeClass('selectedBg');
                $(this).closest('li').addClass('selectedBg');
                //$(this).closest('li').toggleClass('selectedBg')
                console.log(ageUrl);
            }
        });

        $('.crossIconSel').on('click', function(){
            alert('hi');
            $('.ageUrl li, .ageUrl li a').removeClass('selectedBg, crossIconSel');  
        });

答案 1 :(得分:1)

您的if条件错误,因为您在a元素上检查了它有SelectedBg个类,而您已在.closest(li)上应用了该类:

只需像这样if条件:

if ($(this).closest('li').hasClass('selectedBg')) {
    $('.ageUrl li, .ageUrl li a').removeClass('selectedBg');
}

Working Demo

答案 2 :(得分:0)

看看是否有效

Jquery的

$('.ageUrl li a').on('click', function (e) {
            e.preventDefault();
            $('.ageUrl li a').not(this).removeClass('selectedBg');
            if( $(this).hasClass('selectedBg')){
               $(this).removeClass('selectedBg');
            }
            else{
                $(this).addClass('selectedBg');
            }
        });

工作代码 - > JSFIDDLE

相关问题