Question

我一直致力于在jQuery中制作基本的小图像轮播。

目前，我被if else函数内的changeImage逻辑困住了。

当用户点击“下一个”链接时，下一个图像应该淡入。幸运的是，当我注释掉if else语句时，我能够实现淡出的图像，但这不是什么我追求。所以我们知道这是一个逻辑问题。

我只是不确定如何在我的conditions语句中组合if else来实现正确的语法，我确信这个逻辑也可以更清晰。

请查看

function changeImage (newIndex) {
var i = newIndex;
var current = i;

// `if` user clicks on next then slide image "right" 

// something wrong here with my logic..

if ((newIndex === 'next') && i === (current < lengthOfImages - 1)) {
    return current + 1;
}
else {
    return 0;
}

// fadeout
listOfImages.fadeOut(transitionSpeed).
eq(i).fadeIn(transitionSpeed);
}

// click function on the next link
$('.next').on('click',function() {
changeImage('next');
});

一些反馈如何通过解决方案的一些提示来解决这个问题将非常感激。

的jsfiddle http://jsfiddle.net/kapena/v82pvq7x/1/

Answer 1

Return statement将退出该功能。之后的任何东西都不会运行。如果你想真正返回这个数字，你需要在最后完成。

我认为你实际上想要设置current而不是返回。你的逻辑也没有任何意义。大多数人会像这样做检查：

current++;
if (current >= lengthOfImages) {
    current = 0;
}

Answer 2

当＆＃39;接下来＆＃39;单击，发生以下情况：

i，传递'next'作为参数。
在此函数中，声明了current的变量并将其设置为i。
'next'的变量也设置为if，目前设置为newIndex。
您的'next'语句会检查i（传入的参数）是否等于current < lengthOfImages - 1以及i是否等于{{1}的布尔值1}}。这是一个布尔值，return不是布尔值。 这就是您的功能无法正常启动的原因。
您的条件中的fadeOut语句会导致您的功能完成，从而使您的fadeIn和const转换永远无法执行。

Answer 3

这部分

if ((newIndex === 'next') && i === (current < lengthOfImages - 1))

总是假的：

i = 'next'
current = 'next'
(current < lengthOfImages - 1) is a boolean

因此===始终为false，并且flow转到return子句。

无法使我的if else语句逻辑工作

3 个答案: