循环链表未按预期工作（jquery）

Question

我创建了一个循环链表来横向遍历 ul 图像（我创建了一个图像库，并使用链表通过左右箭头键浏览图像）。一切正常，直到我到达列表末尾并尝试返回第一张图片（或按左键，当我到达开头并尝试到达最后一张时）。这是我第一次使用 jQuery，我不太擅长循环链表（我只需要使用一次——用于学校），问题似乎是我的 getNextPic 函数中的 if/else 语句。

顺便说一句，我知道这真的很草率。就像我说的，第一次，所以如果有点难以理解，我很抱歉。我发布了很多我的代码，因为我总是看到这里的人发布的内容不足以找到问题。我知道的大部分工作都很好。正如我所说，问题在于 getNextPic 函数，3rd sn-p down。感谢任何试图提供帮助的人:)

这是fiddle

html

<div id="gallery">
<div id="main">
    <img id="main_img" src="d:/allyphotos/amanda_1.jpg" alt=""/></div>
    <div id="thumbnail">
    <ul>
        <li><img class="thumb" id="long" src="d:/allyphotos/thumb/olivia_2.jpg"/></li>
        <li><img class="thumb" id="long" src="d:/allyphotos/thumb/autumn_1.jpg"/></li>
        <li><img class="thumb" id="long" src="d:/allyphotos/thumb/olivia_2.jpg"/></li>
        <li><img class="thumb" id="long" src="d:/allyphotos/thumb/autumn_1.jpg"/></li>
        <li><img class="thumb" id="long" src="d:/allyphotos/thumb/olivia_2.jpg"/></li>
        <li><img class="thumb" id="long" src="d:/allyphotos/thumb/autumn_1.jpg"/></li>
        <li><img class="thumb" id="long" src="d:/allyphotos/thumb/olivia_2.jpg"/></li>
        <li><img class="thumb" id="long" src="d:/allyphotos/thumb/autumn_1.jpg"/></li>
    </ul>   
    </div>
</div>

jQuery

文件准备功能

$(document).ready(function(){

//these ($first and $last) dont change
    var $first = $('li:first img', '#gallery ul');
    var $last = $('li:last img', '#gallery ul');
//set to current selected image to be displayed
    var current = $first;   
    var previousImage = current;

runGallery(current, $first, $last, previousImage);
});

我的 runGallery 函数

    function runGallery($current, $first, $last, previousImage){
//first and last thumbnails, selected and current           
    $("body").keydown(function(e){
        // left arrow pressed
        if ((e.keyCode || e.which) == 37)
        {   $current = getNextPic($current, $first, $last, false);//false gets previous img, true gets following img

            fade($current, previousImage);//fade selected, unfade previously selected
            previousImage=$current;

            var newlink = $($current).attr('src').replace('thumb/', '');
            $('#main_img').attr('src', newlink);//set $current to main_img
        }
        // right arrow pressed
        if ((e.keyCode || e.which) == 39)
        {
            $current = getNextPic($current, $first, $last, true);

            fade($current, previousImage);
            previousImage=$current;

            var newlink = $($current).attr('src').replace('thumb/', '');
            $('#main_img').attr('src', newlink);
        }   
    });


    $("#gallery li img").click(function()
    {
    //fade selected and unfade previous selected
        fade(this, previousImage);
        $current = this;
        previousImage = this;

    //get src for clicked thumb and change to full version
        var newlink = $(this).attr('src').replace('thumb/', '');
        $('#main_img').attr('src', newlink);
    });

    var imgSwap =[];

    $("gallery li img").each(function()
    {
        imgUrl = this.src.replace('thumb/','');
        imgSwap.push(imgUrl);
    });
    $(imgSwap).preload();
}

我的 getNextPic 函数——我认为这就是问题所在。我已经评论了不能正常工作的行

function getNextPic(current, first, last, boolval)
{
    var next = $(current).closest('li');

    if(boolval===true)
    {
        if(current === last)
        {
            next = first;//this seems to never happen???
        }
        else
        {
            next = $(next).next('li');
            next =  $(next).find('img');
        }
    }
    else
    {
        if(current === first)
        {
            next = last;//this also never happens
        }
        else
        {
        next = $(next).prev();
        next = $(next).find('img');
        }
    }

    return next;
}

我的淡入淡出功能，99.999% 肯定这与问题完全无关，但无论如何都会发布它

 function fade(current, previous)
{
    $(previous).fadeTo('fast',1);
    $(current).fadeTo('fast', 0.5);
}

预加载函数，我没有编写（我从教程中得到它），但我知道它不会导致问题。发布以便任何看起来的人也可以排除它。

$.fn.preload = function(){
this.each(function(){
    $('<img/>')[0].src=this;
});

}

Answer 1

jquery的比较对象不能直接进行。

您的代码包含，例如

current === last

相反，正如this answer 中所建议的，使用内部对象：

您需要比较原始 DOM 元素，例如：

if ($(this).parent().get(0) === $('body').get(0))

或

if ($(this).parent()[0] === $('body')[0])

查看this fixed fiddle 了解您的预期结果。