3

我正在使用单选按钮并根据选择的单选按钮显示图像。但不知何故，我收到了图像数组的错误。我只显示了两张图片，并且与正确的值不匹配。是我的数组还是 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)

获取第一项，第二项获取 1，第三项获取 2。

请注意选择第一个项目如何加载第二个图像，第二个项目如何加载第三个。

于 2012-09-08T03:02:21.990 回答
3

数组从 index 开始0，因此您有以下选择：

  • 采用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 回答