配列とJSを使用してhtml要素のクラスを置き換えるにはどうすればよいですか？

Question

リンクをクリックしたときに、配列内の次のクラスで要素クラスを置き換えるインタラクションを作成しようとしています。どうやってやるの？ Htmlの

<a id="text" href="#">Change weights</a> 
<h1>Hello world</h1> 

Javascriptを

var weights = ["jHairline", "jThin", "jLight", "jRegular", "jMedium"]; 

$('text').addEventListener('click', function(e) { 
    $("h1").each("weights"); 
    e.preventDefault(); 
}); 

は、事前にありがとうございます。

Answer 1

あなたは私は本当にあなたのjqueryのを得ることはありませんが、あなたがそれを行うことができます

$(function() { 
    var weights = ["jHairline", "jThin", "jLight", "jRegular", "jMedium"]; 
    //Variable to store the current class being pointed 
    var currentIndex = 0; 

    //Bind click handler 
    $('#text').on('click', function(e) { 
     //Removes all classes and a 
     $("h1").removeClass().addClass(weights[currentIndex]); 

     //Reset to 0, if its last index 
     if (currentIndex == weights.length) 
      currentIndex = 0; 
     else 
      currentIndex++; 

     e.preventDefault(); 
    }); 
}); 

DEMO

Answer 2

のようなものができ： $（ 'yourElement。 '）addClass（' ClasstoAddを'）。 .removeClass（ 'ClassToRemove'）;

Answer 3

すべてh1要素を繰り返し、関連するクラスを設定する必要があります。この作業を行うには.addClass()を使用してください。

var weights = ["jHairline", "jThin", "jLight", "jRegular", "jMedium"]; 
 
$("#text").click(function(){ 
 
    $("h1").removeClass().addClass(function(i){ 
 
     return weights[i]; 
 
    }); 
 
});

.jHairline, .jThin, .jLight { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a id="text" href="#">Change weights</a> 
 
<h1>Hello world</h1> 
 
<h1>Foo bar</h1> 
 
<h1>Baz bat</h1>