Question

我有两张不同ID的图片，比方说＃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);
    }
}

Jquery切换多个选择器

1 个答案: