Javascript jQuery条件代码未按预期工作：返回'；未定义'；

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

当我点击一个图像时，我可以在.mainNav中更改图像的来源。稍后，我将使用getThePrevAndNextImages（）函数进行其他操作

单击第一个元素时，我希望看到的是：

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

但是我得到的只是

没有上一个img

然后，当我执行

console.log（nextImg）

时，我得到了

未定义的
——但是根据我的代码，有一个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>














尝试更改：

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

致：

您的选择器
li+*
没有意义。似乎您想将目标锁定在最近的
li
。
尝试更改：

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

致：

您的选择器
li+*
没有意义。似乎您想将目标锁定在最近的
li
。
尝试更改：

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

致：

您的选择器
li+*
没有意义。似乎您想将目标锁定在最近的
li
。
尝试更改：

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

致：

您的选择器
li+*
没有意义。似乎你想把目标对准最近的
li
。
与你的

closest('li + *')

您选择的是父li旁边的li项目，而不是父元素本身

给定HTML代码，当您单击
时

你的

将是您的最后一个
li
元素和

$(obj).closest("li + *").next()

将是一个空的jQuery对象，当您重试
数据src
属性时，该对象将导致未定义

阅读有关同级选择器的信息

希望对所有人来说都足够清楚。
用你的

closest('li + *')

您选择的是父li旁边的li项目，而不是父元素本身

给定HTML代码，当您单击
时

你的

将是您的最后一个
li
元素和

$(obj).closest("li + *").next()

将是一个空的jQuery对象，当您重试
数据src
属性时，该对象将导致未定义

阅读有关同级选择器的信息

希望对所有人来说都足够清楚。
用你的

closest('li + *')

您选择的是父li旁边的li项目，而不是父元素本身

给定HTML代码，当您单击
时

你的

将是您的最后一个
li
元素和

$(obj).closest("li + *").next()

将是一个空的jQuery对象，当您重试
数据src
属性时，该对象将导致未定义

阅读有关同级选择器的信息

希望对所有人来说都足够清楚。
用你的

closest('li + *')

您选择的是父li旁边的li项目，而不是父元素本身

给定HTML代码，当您单击
时

你的

将是您的最后一个
li
元素和

$(obj).closest("li + *").next()

将是一个空的jQuery对象，当您重试
数据src
属性时，该对象将导致未定义

阅读有关同级选择器的信息

希望对所有人来说都足够清楚。
显示您的HTML，我们可以提供进一步帮助。完成后，这是我原来的问题，请道歉。而不是
$（obj）。最接近的（“li+*”）
尝试
$（obj.parent（）
当您说“当我执行console.log（nextImg）时，我没有定义”您的意思是说您正在浏览器的javascript控制台中执行此操作？这将是一个范围问题。不，我正在函数中执行此操作。显示您的HTML，我们可以提供进一步帮助。完成后，现在在我的原始问题中，抱歉。而不是
$（obj）。最近（“li+*”）
尝试
$（obj.parent（）
当您说“当我执行console.log（nextImg）时，我未定义”您的意思是说您正在浏览器的javascript控制台中执行此操作？这将是一个范围问题。不，我正在函数中执行此操作。显示您的HTML，我们可以提供进一步帮助。完成后，现在在我的原始问题中，抱歉。而不是
$（obj）。最近（“li+*”）
尝试
$（obj.parent（）
当您说“当我执行console.log（nextImg）时，我未定义”您的意思是说您正在浏览器的javascript控制台中执行此操作？这将是一个范围问题。不，我正在函数中执行此操作。显示您的HTML，我们可以提供进一步帮助。完成后，现在在我的原始问题中，抱歉。而不是
$（obj）。最近（“li+*”）
尝试
$（obj.parent（）
当您说“当我执行console.log（nextImg）时，我未定义”您的意思是说您正在浏览器的javascript控制台中执行此操作？这将是一个范围问题。不，我是在函数中做的。谢谢你，菲利克斯，这很有效。我认为.next（）和.prev（）的工作方式不同。这与
.prev（）
和
.next（）
无关。请参阅下面回答中的解释。谢谢你，菲利克斯，这很有效。我认为.next（）和.prev（）的工作方式不同。这与
.prev（）
和
.next（）
无关。请参阅下面回答中的解释。谢谢你，菲利克斯，这很有效。我认为.next（）和.prev（）的工作方式不同。这与
.prev（）
和
.next（）
无关。请参阅下面回答中的解释。谢谢你，菲利克斯，这很有效。我认为.next（）和.prev（）的工作方式不同。这与
.prev（）
和
.next（）
无关。请参阅下面答案中的解释。