JQuery Toggle with Multiple Selectors

Question

У меня есть два изображения с разными идентификаторами, скажем # pic1 и # pic2. Я попытался добавить оба переключателя к переключателю, но они оба переключают один и тот же элемент независимо, поэтому, когда вы нажимаете первый рисунок, а затем второй, второй не переключает целевой div назад, он выполняет вторую часть переключения во второй раз , Например, если он должен сдвинуть 100 пикселей влево, а затем сдвинуть 100 пикселей назад вправо, нажатие # pic1 будет сдвигать его на 100 пикселей слева, но нажатие # pic2 просто сдвинет его на 100 пикселей влево. Может кто-нибудь дать мне представление о том, в каком направлении я должен смотреть?

$('#pic1,#pic2').toggle(
function() 
{ 
    $('#mylayer').delay(1000).animate({left: "+=100"}); 
    $('#overlay').animate({opacity: 0.8}); 
}, 
function() 
{ 
    $('#mylayer').animate({left: "-=100"}); 
    $('#overlay').delay(1000).animate({opacity: 0}); 
}); 

Answer 1

попробовать что-то вроде этого, который отслеживает открытого/закрытого состояния один раз для обоих кликов и использует возможности данных JQuery, чтобы избежать использования глобальной переменной и сделать это более расширяемым для использования в нескольких местах:

$('#pic1,#pic2').click() { 
    var mylayer = $("#mylayer"); 
    var open = mylayer.data("open"); 
    if (open) { 
     mylayer.animate({left: "-=100"}); 
     $('#overlay').delay(1000).animate({opacity: 0}); 
     mylayer.data("open", false); 
    } else { 
     mylayer.delay(1000).animate({left: "+=100"}); 
     $('#overlay').animate({opacity: 0.8}); 
     mylayer.data("open", true); 
    } 
}