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

Question

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

顺便说一句，我知道这真的很马虎。就像我说的，第一次，所以如果有点难以理解，我很抱歉。我发布了很多我的代码，因为我总是看到这里的人没有发布足够多的代码来发现问题。我知道的大部分工作正常。正如我所说，问题在于 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 以获得您的预期结果。

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

circular linked list not working as expected (jquery)

html

javascript

jquery

image-gallery

circular-list