javascript - クリックでdivを左右に移動

Question

最初にクリックしたときにdivを左に移動させ、2回目に元の位置に戻し、3回目に再び左に移動させたい..

では、なぜこれが機能しないのですか: http://jsfiddle.net/kS7KE/2/

    var checker = new Boolean();
checker = true;
if (checker = true){
    $("#div").click(function () {   
        $(this).animate({left: "10%"},400);   
        checker = false;
    });
}
if (checker != true){
    $("#div").click(function () {   
        $(this).animate({left: "30%"},400);   
        checker = true;
    });
}

Answer 1

なぜそんなに多くのコード？:)

var checker = true;
$("#div").click(function () {
    targetLeft = checker ? "10%" : "30%";
    $(this).animate({left: targetLeft},400);   
    checker ? checker = false : checker = true;
});

http://jsfiddle.net/kS7KE/5/

Answer 2

まず、使用しないでくださいnew Boolean()。のように初期化するだけですvar checker = true;

次に、最初の条件 ( checker = true) で代入演算子を使用しています。

第三に、クリックごとに条件を実行していません。

第 4 に、コードがかなり複雑です。サンプルは次のとおりです。

var checker = true;
$('#div').click(function() {
    $(this).animate({
        left: checker ? "10%" : "30%"
    });
    checker = !checker;
});

Answer 3

いくつかの問題:

1. if (checker = true)

   等価性のチェック (または)=ではなく、代入 ( ) を使用しています。=====

2. チェックはバインド時に行われます

   checkerクリックイベントをチェックインしたい。

このようなものはトリックを行います：

var checker = new Boolean();
checker = true;
$("#div").click(function () { 
    var left = checker ? "10%" : "30%";
    $(this).animate({left: left},400);   
    checker = !checker;
});

http://jsfiddle.net/lbstr/L4TN3/

Answer 4

あなたがしたように、互いに競合する複数のイベント ハンドラーを同じオブジェクトにアタッチしないでください。これは、コードが行うはずの同じことを行う、少し明確で単純なバージョンです。ご覧のとおり、1 つのイベント ハンドラーのみを使用します。

var checker = true;
$('#div').click(function(){
    if(checker){
       $(this).animate({left: "10%"},400);   
       checker = false; 
    } else {
        $(this).animate({left: "30%"},400);   
        checker = true;
    }
});

さらに、オペランドの比較=に使用する代わりに、最初の if ステートメント (単一) で代入を実行します。==

Answer 5

クリックイベントを一度割り当て、その中でロジックを実行する必要があります: http://jsfiddle.net/kS7KE/2/

var checker = new Boolean();
checker = true;
$("#div").click(function () { 

if (checker == true){       
        $(this).animate({left: "10%"},400);   
        checker = false;
    }
else{

        $(this).animate({left: "30%"},400);   
        checker = true;
    }
});

Answer 6

これを使って

    var checker = new Boolean();
checker = true;

    $("#div").click(function () { 
        if (checker == true){
        $(this).animate({left: "10%"},400);   
        checker = false;
            }
        else
        {
            $(this).animate({left: "30%"},400);   
        checker = true;
        }
    });

Answer 7

var checker = true;

$("#div").on('click', function () {
    if (checker == true) {
        checker = false;
        $(this).animate({
            left: "10%"
        }, 400);

    } else {
        $(this).animate({
            left: "30%"
        }, 400);
        checker = true;
    }
});

Demo

Answer 8

これを試して：

var checker = true;
$("#div").on('click', function () {
    var left = checker ? '10%' : '30%';
    $(this).animate({left: left},400);   
    checker = !checker
});