单击时左右移动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

为什么需要那么多代码？ :)

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

一些问题：

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 3

首先，不要使用new Boolean() 。 就像var checker = true;一样初始化它var checker = true;

其次，在第一个条件中使用赋值运算符（ checker = true ）。

第三，您不会在每次点击时执行条件。

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

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

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语句（单= ）中执行赋值，而不是使用==来比较操作数。

Answer 5

您需要分配一次click事件，并执行其中的逻辑： 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;
    }
});

演示版

Answer 8

尝试这个：

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