Javascript'reset'函数无法正常工作

Question

为什么我需要点击两次才能在'重置'后更改类？我该如何解决这个问题？

期望的结果是将函数恢复到初始状态并正常循环数组。下面的演示。

$(function() { 
    var weights = ["jHairline", "jThin", "jLight", "jMedium"]; 
    var currentIndex = 0; 
    $('#text').on('click', function (e) { 
     $("h1").removeClass().addClass(weights[currentIndex]); 
     $("h1").html(weights[currentIndex]); 

     if (currentIndex == weights.length - 1) 
      currentIndex = 0; 
     else 
      currentIndex++; 

     e.preventDefault(); 
    }); 

    $('#reset').click(function() { 
     currentIndex = 0; 

     $("h1").removeClass().addClass(weights[currentIndex]); 
     $("h1").html(weights[currentIndex]); 
    }); 
}); 

Demo

Answer 1

因为你重置为0，并不会增加它的下一次更新。 速战速决将

$('#reset').click(function() { 
    currentIndex = 0; 

    $("h1").removeClass().addClass(weights[currentIndex]); 
    $("h1").html(weights[currentIndex]); 
    currentIndex=1; 
    }); 

正确的方法是在$('#text').on('click', function(e) {函数的开始做递增

- 编辑澄清request--
这是我的个人建议写它：

$(function() { 
    var weights = ["jHairline", "jThin", "jLight", "jMedium"]; 
    var currentIndex = -1; 
    $('#text').on('click', function (e) { 
     currentIndex=(currentIndex+1)%weights.length; 
     $("h1").removeClass().addClass(weights[currentIndex]); 
     $("h1").html(weights[currentIndex]); 

     e.preventDefault(); 
    }); 

    $('#reset').click(function() { 
     currentIndex = 0; 

     $("h1").removeClass().addClass(weights[currentIndex]); 
     $("h1").html(weights[currentIndex]); 
    }); 
}); 

的2线I添加/修改是var currentIndex = -1;和currentIndex=(currentIndex+1)%weights.length;。

因此，本质上，当text.click函数开始时，您将数字递增1。如果你在开始时以-1开始，那么当text.click进入时，它会将它递增到0.在重置时将它设置为0将确保它在下次运行text.click时增加到1。

此外，

if (currentIndex == weights.length - 1) 
      currentIndex = 0; 
     else 
      currentIndex++; 

当作为currentIndex=(currentIndex+1)%weights.length;写入是一个比较简洁和清晰。它将数字加1，然后修改（除以余数时），一旦weight.length被击中，将其循环回0。