Question

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

顺便说一句，我知道这真的很草率。就像我说的那样，第一次，所以如果有点难以理解，我很抱歉。我发布了很多代码，因为我总是看到这里的人没有足够的帖子来发现问题。我知道的大多数工作正常。问题出在getNextPic函数中，正如我所说，第3个片段下来。感谢任何试图提供帮助的人：）

这是一个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您的预期结果。

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

1 个答案: