javascript - jQuery 条件代码未按预期工作 : returns 'undefined'

Question

我正在检查我的代码中是否有上一个和/或下一个元素。除非我单击第一个元素，否则一切正常。

当我单击图像时，我可以更改 .mainNav 中图像的来源。稍后我将使用 getThePrevAndNextImages() 函数来做其他事情。

当我点击第一个元素时，我期望看到的是:

console.log('there isnt a prev img');
console.log('the next image is: ' + nextImg);

但我得到的只是没有上一个图像。

当我执行 console.log(nextImg) 时，我得到 undefined - 但根据我的代码，有一个 nextImg，所以应该 console.log( ) 肯定是吗？

我的代码有什么问题吗？

$(function () {
    $('.filmstrip img').on('click', function () {
        var new_src = $(this).attr('data-src');
        $('.mainView img.current').attr('src', new_src);
        getThePrevAndNextImages(this);
    });

    function getThePrevAndNextImages(obj) {
        //get the previous element's data source
        var prevImg = $(obj).closest("li + *").prev().find('img').attr('data-src');
        if (prevImg === undefined) {
            console.log('there isnt a prev img');
        }
        if (prevImg != undefined) {
            console.log('the previous image is: ' + prevImg);
        }
        //get the next element's data source
        var nextImg = $(obj).closest("li + *").next().find('img').attr('data-src');
        if (nextImg === undefined & prevImg != undefined) {
            console.log('You are at the last image');
        }
        if (nextImg != undefined) {
            console.log('the next image is: ' + nextImg);
        }
    }
});

我的 HTML:

<ul class="mainView">
    <li><img class="previous" src="1-large.png" alt=""></li>            
    <li><img class="current" src="3-large.png" alt=""></li>         
    <li><img class="next" src="2-large.png" alt=""></li>
</ul>
<ul class="filmstrip">
    <li><img src="1-small.png" data-src="1-large.png" alt=""></li>          
    <li><img src="2-small.png" data-src="2-large.png" alt=""></li>          
    <li><img src="3-small.png" data-src="3-large.png" alt=""></li>          
    <li><img src="4-small.png" data-src="4-large.png" alt=""></li>          
    <li><img src="5-small.png" data-src="5-large.png" alt=""></li>          
    <li><img src="6-small.png" data-src="6-large.png" alt=""></li>          
</ul>

Answer 1

尝试改变:

var nextImg = $(obj).closest("li + *").next().find('img').attr('data-src');

至:

var nextImg = $(obj).closest("li").next().find('img').attr('data-src');

您的选择器li + *没有任何意义。看起来您想改为定位最近的 li。