Jquery Toggle с несколькими селекторами

Question

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

$('#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);
    }
}