forループ内のifステートメントの使用

Question

私は2セットのラジオボタンを持つフォームを持っています。 特定の値がチェックされたときに、<p>要素（Idの説明付き）が対応するデータで更新されるようにしようとしています。

これは私が持っているものですが、今は要素を更新していません。

DEMO

function classStats() { 
    classes = ['archer', 'mage', 'warrior']; 
    classStats = ['HP: 20 Strength: 3 Intellect: 1 Speed: 5 Magic Defense: 1 Defense: 3', 'HP: 15 Strength: 1 Intellect: 6 Speed: 2 Magic Defense: 2 Defense: 1', 'HP: 30 Strength: 2 Intellect: 1 Speed: 1 Magic Defense: 3 Defense: 5']; 
    classAdd = ['The archer also has a special passive for armor penetration.', 'The mage has a special passive for increased gold gain', 'The warrior has a special passive for percent damage mitigation.']; 
    for (i = 0; i < 3; i++) { 
    c = classes[i]; 
    e = classStats[i]; 
    f = classAdd[i]; 
    if ($('input[name=class]:checked').val() === c) { 
     $('#descript').text(e + ' ' + f); 
    } 
    } 
} 
classStats(); 

Answer 1

文書準備であなたのラジオボタンのonchangeイベントを追加します。イベントが発生したときにコードを呼び出します。

$('input[name=class]').change(function() { 
    classes = ['archer', 'mage', 'warrior']; 
    classStats = ['HP: 20 Strength: 3 Intellect: 1 Speed: 5 Magic Defense: 1 Defense: 3', 'HP: 15 Strength: 1 Intellect: 6 Speed: 2 Magic Defense: 2 Defense: 1', 'HP: 30 Strength: 2 Intellect: 1 Speed: 1 Magic Defense: 3 Defense: 5']; 
    classAdd = ['The archer also has a special passive for armor penetration.', 'The mage has a special passive for increased gold gain', 'The warrior has a special passive for percent damage mitigation.']; 
    for (i = 0; i < 3; i++) { 
     c = classes[i]; 
     e = classStats[i]; 
     f = classAdd[i]; 
     if ($('input[name=class]:checked').val() === c) { 
      $('#descript').text(e + ' ' + f); 
     } 
    } 
}); 

ラジオボタンのイベントの追加方法の詳細は、How to use radio on change event?を参照してください。

Answer 2

あなたのコード内に複数の問題があります -

1.Youは、ラジオボタンの変更イベントをリッスンしていませんが。

2.ループする必要はありません。

以下は、コードを変更して最適化したものです。常にfalseです4`

var classes = ['archer', 'mage', 'warrior']; 
var classStats = ['HP: 20 Strength: 3 Intellect: 1 Speed: 5 Magic Defense: 1 Defense: 3', 'HP: 15 Strength: 1 Intellect: 6 Speed: 2 Magic Defense: 2 Defense: 1', 'HP: 30 Strength: 2 Intellect: 1 Speed: 1 Magic Defense: 3 Defense: 5']; 
var classAdd = ['The archer also has a special passive for armor penetration.', 'The mage has a special passive for increased gold gain', 'The warrior has a special passive for percent damage mitigation.']; 
var c,e,f; 

$('input[name=class]').change(function(){ 
    c = classes.indexOf($(this).val()); 
    e = classStats[c]; 
    f = classAdd[c]; 
    $('#descript').text(e + ' ' + f); 
}); 

DEMO