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

Question

我是 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 时才有效。如果我单击下一步，然后单击两次上一个，它不起作用并且什么也不显示。问题出在哪里？

Answer 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 中，因此您无需在脚本启动时选择多个图像。三元运算符的使用也已更改，以便更清晰/更清晰。