具有多个选择器的 Jquery 切换

发布于 2024-12-02 22:23:34 字数 496 浏览 1 评论 0原文

我有两张具有不同 ID 的图像，比如 #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});
});

原文

I have two images with different IDs, lets say #pic1 and #pic2. I tried adding both selectors to a toggle but they both toggle the same element independently, so when you click the first pic and then the second, the second doesn't toggle the target div back it performs the first part of the toggle a second time. For instance if it's supposed to slide a 100px to the left and then slide 100px back to the right, clicking #pic1 would slide it 100px left but clicking #pic2 would just slide it 100px to the left again. Can someone give me an idea of what direction I should be looking?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

洋洋洒洒 2024-12-09 22:23:34

尝试这样的方法，跟踪两次单击的打开/关闭状态一次，并使用 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);
    }
}

Try something like this that keeps track of the open/closed state once for both clicks and uses jQuery's data capability to avoid using a global variable and to make this more extensible to be used multiple places:

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

回复收藏 0 原文

~没有更多了~