0

ページにドラッグ可能にしたい要素があります。

クリックイベントで、クラス「アクティブ」を追加すると、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 文が機能していないようです...

4

3 に答える 3

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);
            }
        }
    });
});
于 2013-01-25T16:27:43.510 に答える
1

このセレクター：

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

する必要があります：

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

引用符に注意してください！

于 2013-01-25T16:28:13.143 に答える
0

jQuery の場合:

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

編集：それは返すtrueかfalse：jQuery hasClassドキュメント

于 2013-01-25T16:20:07.740 に答える