Question

无法让我的 if else 语句逻辑发挥作用

2015-05-27

58

javascript jquery carousel

我一直在用 jQuery 制作一个基本的小型图像轮播。

目前，我被困在 changeImage 函数中的 if else 逻辑上。

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

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

请检查

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 语句将退出该函数。它后面的任何内容都不会运行。如果您真的想返回数字，您需要在最后执行此操作。

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

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

Answer 2

单击“下一步”时，将发生以下情况：

changeImage 被触发，并将 'next' 作为其参数传递。
在此函数中，声明变量 i 并将其设置为 'next' 。
变量 current 也被设置为 i ，而该变量当前设置为 'next' 。
您的 if 语句检查 newIndex （传入的参数）是否等于 'next' ，以及 i 是否等于布尔值 current < lengthOfImages - 1 。这是对布尔值的求值，而 i 不是布尔值。 这就是您的函数无法正确触发的原因。
您的条件中的 return 语句导致您的函数完成，从而使您的 fadeOut 和 fadeIn 转换永远没有机会执行。

Answer 3

此部分

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

始终为假：

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

因此 === 始终为假，流程转到 return 子句。