Javascript / Jquery：IF语句总是运行

Question

单击侧边栏按钮时代码始终运行。它只是在每次向右移动时不断增加260px。但它应该在第一次点击后停止。

$(document).ready(function() {

if ($('#sidebar').css('left') === '-260px') {   

    $('#btnsidebar').click(function() {
        $('#sidebar').animate({left: '+=260',}, 1000);
    });

    $('#btnsidebar').click(function() {
        $('#btnsidebar').animate({left: '+=260',}, 1000);
    });

}

});

Answer 1

$(document).ready(function() {    
   $('#btnsidebar').click(function() {
        if ($('#sidebar').css('left') === '-260px') {    // put if block inside the event
           $('#sidebar').animate({left: '+=260',}, 1000);
           $('#btnsidebar').animate({left: '+=260',}, 1000);  // you are not required to add another click function for doing this
        }
    });
});

Answer 2

将if移至点击处理程序正文：

$('#btnsidebar').click(function() {
    if ($('#sidebar').css('left') === '-260px')
        $('#btnsidebar').animate({left: '+=260',}, 1000);
});

Answer 3

您可以有条件地添加这些事件处理程序，但事件处理程序中的操作（动画）是无条件的。在事件处理程序中添加适当的条件（您可以复制它）。

Answer 4

你需要把你的if语句放在里面。

$('#btnsidebar').live('click', function() {
    if ($('#sidebar').css('left') === '-260px') {
        $('#sidebar').animate({
            left: '+=260',
        }, 1000);
    }
});

检查http://jsfiddle.net/zXKnr/1/

处的工作示例