3

ラジオボタンを使用して、選択したラジオボタンに応じて画像を表示しています。しかし、どういうわけか、画像配列でエラーが発生します。2枚の画像しか表示されず、適切な値と一致しません。配列またはHTMLにエラーがありますか？例

バイクのリファレンス：

JS

<script>
 function check_value(val) { 
       var imgs = ['images/bike1.jpg', 'images/bike2.jpg', 'images/bike3.jpg'];
       var img = imgs[val];
       var el = document.getElementById("imgBox");
       if (img) {
         el.src = img;
         el.style.display = "";
       }

     }
</script>

HTML

<form name="builder">
   <input type="radio" name="field" value="1" onclick='check_value(1)'/> KAWASAKI KX 450F<br />
   <input type="radio" name="field" value="2" onclick='check_value(2)'/> 2010 Yamaha Road Star S<br />
   <input type="radio" name="field" value="3" onclick='check_value(3)'/> Aprilia RSV4<br />
</form>

<img id="imgBox" src="#" style="display:none">
4

3 に答える 3

3

配列はゼロインデックスです。あなたは電話する必要があります：

check_value(0)

最初のアイテムを取得し、2番目のアイテムを1つ、3番目のアイテムを2つ取得します。

最初のアイテムを選択すると2番目の画像が読み込まれ、2番目のアイテムが3番目の画像に読み込まれることに注意してください。

于 2012-09-08T03:02:21.990 に答える
3

配列は index0から始まるため、次の代替手段があります。

  • 使用するimgs[val-1]
  • 配列をに変更します[null, "img1", "img2 ...]
  • で画像を開始しますimg0

ただし、はるかに優れたアプローチは次のとおりです。

function check_value(val) {
    var el = document.getElementById("imgBox");
    if (val>0 && val<4) { //will trigger when [1,2,3], modify it according to your needs
        el.src = "images/bike" + val + ".jpg";
        el.style.display = "";
    }
}
于 2012-09-08T03:15:51.667 に答える
2

Javascript配列は、0から上に向かってインデックスが付けられます。それで

<form name="builder">
   <input type="radio" name="field" value="1" onclick='check_value(1)'/> KAWASAKI KX 450F<br />
   <input type="radio" name="field" value="2" onclick='check_value(2)'/> 2010 Yamaha Road Star S<br />
   <input type="radio" name="field" value="3" onclick='check_value(3)'/> Aprilia RSV4<br />
</form>

する必要があります

<form name="builder">
   <input type="radio" name="field" value="1" onclick='check_value(0)'/> KAWASAKI KX 450F<br />
   <input type="radio" name="field" value="2" onclick='check_value(1)'/> 2010 Yamaha Road Star S<br />
   <input type="radio" name="field" value="3" onclick='check_value(2)'/> Aprilia RSV4<br />
</form>
于 2012-09-08T03:02:23.833 に答える