jQuery hasClass和if

Question

我遇到了jquery hasClass的问题。

$(document).ready(function () {

var body = $('body'),
    leftPane = $('.pane-left');

leftPane.on('click', function () {

    body.removeClass('left-closed');
    body.addClass('left-open');
    $('.pane-left h2').fadeIn(600);

    setTimeout(function() {
        rightPane.fadeOut(0);
        $('.pane-left-wrap').fadeIn(100);
        $('.pane-left-wrap .secondary-nav li:first-child').fadeIn(100);
        $('.pane-left-wrap .secondary-nav li:nth-child(2)').fadeIn(600);
        $('.pane-left-wrap .secondary-nav li:nth-child(3)').fadeIn(1200);
        $('.pane-left-wrap .secondary-nav li:nth-child(4)').fadeIn(1800);
        $('.pane-left-wrap .secondary-nav li:nth-child(5)').fadeIn(2400);
    }, 600);

});

if(body.hasClass('left-open')) {

    leftPane.on('click', function () {

        body.removeClass('left-open');
        body.addClass('left-closed');
        $('.pane-left h2').fadeOut(600);

    });

}

});

我单击窗格左侧，左侧打开添加到我的body标签。然后我再次点击，但我的if（）内的代码无法访问。那是为什么？

Answer 1

如果条件仅在document.ready状态下运行一次，那么您必须在click事件中添加。但是你在click事件中有一个动作，我认为它是适合你的正确代码：

$(document).ready(function () {

    var body = $('body'),
        leftPane = $('.pane-left');

    leftPane.on('click', function () {

        if(body.hasClass('left-open')) {
            body.removeClass('left-open');
            body.addClass('left-closed');
            $('.pane-left h2').fadeOut(600);
        } else {
            body.removeClass('left-closed');
            body.addClass('left-open');
            $('.pane-left h2').fadeIn(600);

            setTimeout(function() {
                rightPane.fadeOut(0);
                $('.pane-left-wrap').fadeIn(100);
                $('.pane-left-wrap .secondary-nav li:first-child').fadeIn(100);
                $('.pane-left-wrap .secondary-nav li:nth-child(2)').fadeIn(600);
                $('.pane-left-wrap .secondary-nav li:nth-child(3)').fadeIn(1200);
                $('.pane-left-wrap .secondary-nav li:nth-child(4)').fadeIn(1800);
                $('.pane-left-wrap .secondary-nav li:nth-child(5)').fadeIn(2400);
            }, 600);
        }
    });

});

Answer 2

将.left-open的检查移至点击处理程序。

$(document).ready(function () {
    var body = $('body'),
    leftPane = $('.pane-left');

    leftPane.on('click', function () {

        // Added for check 'left-open' class.
        if(!body.hasClass('left-open')) {
            body.removeClass('left-closed');
            body.addClass('left-open');
            $('.pane-left h2').fadeIn(600);

            setTimeout(function() {
                rightPane.fadeOut(0);
                $('.pane-left-wrap').fadeIn(100);
                $('.pane-left-wrap .secondary-nav li:first-child').fadeIn(100);
                $('.pane-left-wrap .secondary-nav li:nth-child(2)').fadeIn(600);
                $('.pane-left-wrap .secondary-nav li:nth-child(3)').fadeIn(1200);
                $('.pane-left-wrap .secondary-nav li:nth-child(4)').fadeIn(1800);
                $('.pane-left-wrap .secondary-nav li:nth-child(5)').fadeIn(2400);
            }, 600);
        }

        // Moved this function inside click event.
        if(body.hasClass('left-open')) {
            leftPane.on('click', function () {
                body.removeClass('left-open');
                body.addClass('left-closed');
                $('.pane-left h2').fadeOut(600);
            });
        }
    });
});

Answer 3

听起来这就是您正在寻找的（已清理的版本）和.toggleClass();似乎更适合您的场景。

if ($('body').hasClass("left-open")) {
    $('#leftPaneElem').click(function() {

         body.toggleClass('left-closed');

          // more stuff

    });
}