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').live('click', function() {
    if ($('#sidebar').css('left') === '-260px') {
        $('#sidebar').animate({
            left: '+=260',
        }, 1000);
    }
});

Проверьте рабочий пример на http://jsfiddle.net/zXKnr/1/

Answer 3

Вы добавляете эти обработчики событий условно, но действие (анимация) внутри обработчиков событий является безусловным. Добавьте соответствующее условие в обработчики событий (вы можете просто скопировать его).

Answer 4

Переместить if в тело обработчика щелчка:

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