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。