2016-04-27 210 views
0

我有一个包含两组单选按钮的窗体。 我试图做到这一点,当某个值被选中时,一个<p>元素(带有Id描述符)将会用相应的数据进行更新。在for循环中使用if语句

这就是我所拥有的,它现在没有更新元素。

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(); 
+1

'I> 4'始终为false。 –

+1

你的问题是什么?另外我> 4? – brk

+0

更正了它在我的演示https://jsfiddle.net/sq5hntpv/2/应该是我<3 – Shniper

回答

-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?了解有关如何为单选按钮添加事件的详细信息。

1

您的代码存在多个问题: -

1.您没有收听单选按钮更改事件。

2.不需要循环。

下面是你的代码的修改和优化版本。

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