javascript - 单击文本框更改图像

Question

我正在尝试制作一个具有多个文本框的 html 表单。我想根据事件文本框更改图像。我编写的代码工作正常，但如果我想使用更多的更改，则会非常重复。

有更好的方法吗？

html:

<div class="img"<img src=image.jpg" id="f1" /> </div>

<form action = "page.php" method = "post">
 <label> Spec </label> <input type= "text" name = "t1" onclick="changeImage()" value = "" /><br>
 <label> Spec 2 </label> <input type="text" name = "t2" onclick = "changeImage1()" value = "" /> <br>

Javascript:

<script language="javascript">
  function changeImage() {
    var t = document.getElementById('f1');
        t.src='image1.jpg';
   }
  function changeImage1() {
    var t = document.getElementById('f1');
        t.src='image2.jpg';
   }
</script>

Answer 1

现代解决方案

您可以使用新的自定义属性data-something来存储正确的图像。然后在 javascript 中检查元素是否具有正确的属性并显示结果。

js

var form=document.getElementsByTagName('form')[0],
    div=document.getElementsByTagName('div')[0];

form.onclick=function(e){
 !e.target.dataset.img||
 (div.firstChild.src='http://placekitten.com/'+e.target.dataset.img);
}

html

<div><img src="default.png"></div>
<form>
<label><input name="a" data-img="50/200"> a</label>
<label><input name="b" data-img="100/200"> b</label>
<label><input name="c" data-img="150/200"> c</label>
<label><input name="d" data-img="200/200"> d</label>
</form>

演示

http://jsfiddle.net/z5Wu7/

编辑

带有默认图像的较短版本。

form.onclick=function(e){
 div.firstChild.src='url/'+(e.target.dataset.img||'default.jpg')
}