javascript - 循环链表未按预期工作(jquery)

Question

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

顺便说一句，我知道这真的很草率。就像我说的，第一次，所以如果有点难以理解，我很抱歉。我发布了很多代码，因为我总是看到这里的人发布的内容不足以发现问题。我知道其中大部分工作正常。正如我所说，问题出在 getNextPic 函数中，第三个片段如下。感谢任何试图提供帮助的人:)

这是一个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 中的建议，使用内部对象:

You need to compare the raw DOM elements, e.g.:

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

or

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

查看this fixed fiddle达到您预期的结果。