循环画廊使用 next() 和 prev() 方法的问题 - javascript / jQuery

Posted 2023-02-25

【中文标题】循环画廊使用 next() 和 prev() 方法的问题 - javascript / jQuery

【英文标题】：Problems using next() and prev() methods for cyclic gallery - javascript / jQuery

【发布时间】：2019-03-24 17:47:16

【问题描述】：

我是 javascript 和 jQuery 的新手。我正在尝试创建一个在线画廊来查看照片，使用 2 个按钮“下一个”和“上一个”。它必须是循环的，例如，如果我在显示最后一张照片时单击“下一张”，则下一张照片必须是第一张。

我尝试使用 3 个变量：第一个 img、最后一个 img 和当前 img，所以我只需要执行 currimg = currimg.prev()（或 next）。并且，例如，如果显示的 img 是第一个，我会 currimg = lastimg。

$(document).ready(function() 
    $("img").wrapAll("<div></div>");
    $("img").nextAll().hide();
    var firstimg = $("img:first");
    var lastimg = $("img:last");
    var currimg = firstimg;

    $("#nextbutton").click(function()
        currimg.fadeOut("fast", function()
            (currimg==lastimg) ? currimg=firstimg : currimg=currimg.next();
            currimg.fadeIn("fast");  
        );  
    );

    $("#prevbutton").click(function()
        currimg.fadeOut("fast", function()
            (currimg==firstimg) ? currimg=lastimg : currimg = currimg.prev();
            currimg.fadeIn("fast");  
        );  
    );
); 

问题是循环只有在我先按 prev 时才有效。如果我单击下一步，然后单击两次上一个，它不起作用并且什么也不显示。问题出在哪里？

【问题讨论】：

如果你的意思是我应该只用 var currimg = lastimg 替换 var currimg = firstimg（并将 nextAll 替换为 prevAll），它并没有太大变化。这不是问题

【参考方案1】：

您的解决方案的问题在于，每次您将 currimg=currimg.next(); 或 currimg.prev(); 返回的值分配给 currimg 时，您都在分配一个新的 jQuery 对象。

这导致当您进行比较 (currimg==firstimg) 时，即使 currimg 和 firstimg 都指向同一个 DOM 元素，这也不会是真的。

为了检查两个 jQuery 对象是否指向同一个 DOM 元素，您可以使用 is 方法。

因此，您的代码应如下所示：

$(document).ready(function() 
    var $imgs = $("img");
    $imgs.wrapAll("<div></div>");
    $imgs.nextAll().hide();
    var firstimg = $imgs.first();
    var lastimg = $imgs.last();
    var currimg = firstimg;

    $("#nextbutton").click(function()
        currimg.fadeOut("fast", function() 
            currimg = (currimg.is(lastimg)) ? firstimg : currimg.next();
            currimg.fadeIn("fast");  
        );  
    );

    $("#prevbutton").click(function()
        currimg.fadeOut("fast", function()
            currimg = (currimg.is(firstimg)) ? lastimg : currimg.prev();
            currimg.fadeIn("fast");  
        );  
    );
);

请注意，我还将您的所有图像都存储在 $imgs 中，因此您无需在脚本启动时选择多个图像。三元运算符的使用也已更改，以便更清晰/更清晰。

【讨论】：

谢谢您，您解决了我的问题！我不知道，即使 currimg 和 firstimg 都指向同一个 DOM 元素，比较 (currimg==firstimg) 总是错误的。

是的！那是因为当您在 JavaScript 中比较两个对象时，您正在检查它们是否引用内存中的同一对象（即它们的引用相同），而不是它们的值是否相同（您可以在link .