同一个变量的多个实例

Question

我使用AJAX调用从数据库中提取文件名，然后用于使用相同名称的图像填充轮播。

我的网络应用程序使用标签，当点击时，重新加载AJAX并从数据库中提取一组不同的文件名，然后重新填充轮播。

我发现的是，当网络应用最初加载时，轮播工作正常，但如果我点击任何标签，轮播开始功能不正确，即我第一次点击然后使用轮播旋转木马在时间上移动两个图像，第二次点击，图像一次移动三个，依此类推。

如果我检查控制台，我可以看到在通话结束后，当我点击轮播中的左箭头或右箭头时，它就好像有两个相同变量的实例，或者好像两个AJAX调用一样正以某种方式被召唤。图片附上显示我的意思。

正如您所看到的，在初始加载后一切都很好，但是一旦进行任何后续调用，就好像前一次调用的计数继续，并且辅助计数也开始与新数据相关联，或者第三或第四或第五，取决于已拨打多少电话。

$('.tabs-nav li').on('click', function() {
    tabName = $(this).html();
    place = 0;
    products = getProductDetails(selected); //AJAX call
    data = dealWithData(products, place);   //Deferred object that works data
});

Answer 1

听起来你有一个范围问题。最简单的方法是将逻辑置于闭包中，以便将变量限定为特定选项卡。所以不要这样：

var place,count
$(".tabs").on('click',function(){/*shares same place & count */});

它看起来像这样：

$(".tabs").each(function(){
    var place,count
    $(this).on('click',function(){/*each has their own place,count*/});
});