含变量的if语句无法按条件停止？代码错误排查求助

我来帮你排查代码里的两个关键问题：

1. 选择器书写错误 #

你写的$("fa-arrow-right")是在寻找标签名为fa-arrow-right的元素，但实际上fa-arrow-right是Font Awesome的类名，正确的类选择器需要加上前缀.，也就是$(".fa-arrow-right")——这个错误会导致你根本绑定不上目标按钮的点击事件，或者误绑定到无关元素上。

2. if语句的执行时机逻辑错误 #

你的if语句只在页面初始化时执行了一次：此时this_current_position的值是0，满足<=4的条件，所以绑定了点击事件。但之后每次点击按钮时，虽然this_current_position会自增，但这个if判断不会再重新运行了——绑定事件的逻辑已经在初始化阶段完成，后续点击的回调函数里没有任何条件限制，所以不管this_current_position到了多少，都会继续执行动画。

修正后的代码 #

把条件判断放到点击事件的回调函数内部，这样每次点击都会先检查当前位置是否符合要求，再决定是否执行动画：

var this_current_position = 0;
var numItems = 8;

$(".fa-arrow-right").click(function(){
    // 每次点击时先判断是否满足条件
    if (this_current_position <= 4 ) {
        $('.mobile-gallery-content').animate({"left": '+=-324'});
        this_current_position += 1;
    }
});

这样修改后，当this_current_position增加到5时，点击按钮就不会再执行动画了，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Alec Friedman