javascript - 单击时左右移动div

Question

我想让 div 在我第一次点击它时向左走，第二次回到原来的位置，第三次再次离开，等等。

那么为什么这不起作用：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

首先，不要使用new Boolean(). 只需像这样初始化它var checker = true;

其次，您在第一个条件 ( checker = true) 中使用了赋值运算符。

第三，您没有在每次点击时执行条件。

第四，您的代码非常复杂。这是一个示例：

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

Answer 2

为什么这么多代码？:)

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 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

您不应该像您那样将多个事件处理程序附加到彼此冲突的同一对象上。这是一个更清晰、更简单的版本，它与您的代码应该做的事情相同。如您所见，它仅使用一个事件处理程序。

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

此外，您在第一个 if 语句（single =）中执行赋值，而不是使用==来比较您的操作数。

Answer 5

尝试这个：

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

Answer 6

您需要分配一次点击事件，并在其中执行逻辑：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 7

用这个

    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 8

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