Javascriptの「リセット」機能が正しく動作しない

Question

「リセット」後にクラスを変更するには、2回クリックする必要があります。なぜですか？この問題を解決するにはどうすればよいですか？

結果を元の状態に戻して、通常はアレイを循環させます。以下のデモ

$(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; 
    }); 

適切な方法が
request--明確化のため$('#text').on('click', function(e) {機能

--editの最初にインクリメントを行うことであろうことになるこれは私が個人的に推薦する方法ですそれを書く：私は追加

$(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行を/ var currentIndex = -1;とcurrentIndex=(currentIndex+1)%weights.length;を変更しました。

したがって、text.click関数がから始まる場合は、基本的に1をインクリメントしています。最初に-1で始めると、text.clickが入ると0になります。リセットで0に設定すると、次にtext.clickが実行されたときに1に増分されます。また

currentIndex=(currentIndex+1)%weights.length;として書き込む場合、

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

ビットより簡潔かつ明確です。 weightに1を加えた後、modding（分割時に残りの部分を取る）してweight.lengthがヒットしたら0に戻します。