Question

我的页面上有一个我想要拖拽的元素。

在click事件中我添加了类'active'，这只是展开我的div和它里面的图像。

所以最初我的div看起来像......

<div class="work-showcase">

点击它变成......

<div class="work-showcase active">

我想说如果div有类激活，执行X函数，否则执行Y。

$(body).click(function(){

        if($('.work-showcase').hasClass('active')){

            var bleft = 4900 ;
            var bright = $(window).width() - 200;

            $('.active > ul li').draggable({
                 axis: "x", 
                 revert: false,
                 stop: function(event, ui) {
                    if(ui.position.left < -bleft)
                    {   
                    $(this).animate({"left": "0px"}, 600);
                    }
                    if(ui.position.left > bright)
                    {   
                    $(this).animate({"left": "0px"}, 600);
                    }

                }
            });


            } else {


     var sleft = 1846 ;
     var sright = $(window).width() - 200;

            $('.work-showcase > ul li').draggable({
                 axis: "x", 
                 revert: false,
                 stop: function(event, ui) {
                    if(ui.position.left < -sleft)
                    {   
                    $(this).animate({"left": "0px"}, 600);
                    }
                    if(ui.position.left > sright)
                    {   
                    $(this).animate({"left": "0px"}, 600);
                    }

                }
            });

        }

    });

我的If语句似乎不起作用......

Answer 1

试试这个而不是你现在拥有的东西（如果有问题，请告诉我）

$('body').click(function () {
    var drag, left, right;

    if ($('.work-showcase').hasClass('active') === true) {
        drag = '.active > ul li';
        left = -4900;
        right = $(window).width() - 200;
    } else {
        drag = '.work-showcase > ul li';
        left = -1846;
        right = $(window).width() - 200;
    }

    $(drag).draggable({
        axis: 'x',
        revert: false,
        stop: function (event, ui) {
            if (ui.position.left < left) {
                $(this).animate({'left': '0px'}, 600);
            } else if (ui.position.left > right) {
                $(this).animate({'left': '0px'}, 600);
            }
        }
    });
});

Answer 2

这个选择器：

$(body).click(function(){ ... });

需要：

$('body').click(function(){ ... }

注意引号！

Answer 3

使用jQuery：

if($(this).hasClass("active")){
    //do this
} else {
    //do that
}

修改：它会返回true或false：jQuery hasClass Documentation

如果element有类然后运行函数，否则运行另一个

3 个答案: