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/

修改

使用默认img。
的较短版本
form.onclick=function(e){ div.firstChild.src='url/'+(e.target.dataset.img||'default.jpg') }

Answer 2

您可以将图像文件名存储为data-*属性，并使用不显眼的JavaScript将事件处理程序分配给所有输入。此外，onfocus事件比onclick更合适，因为它会处理其他方案，例如按Tab键更改活动输入。

<input type= "text" name = "t1" data-image="image1.jpg" value = "" />
<input type= "text" name = "t2" data-image="image2.jpg" value = "" />

JavaScript的：

window.onload = function(){
    var inputs = document.querySelectorAll('input[type=text]');
    var image =  document.getElementById('f1');

    for(var i=0; i<inputs.length; i++){
        inputs[i].onfocus = function(){
            image.src = this.getAttribute('data-image');
        };
    }
};

注意：这会抓取页面上的所有输入，但您可以根据需要按类或其他标准对其进行过滤。

Answer 3

var states = [];
states[0] = 'image1.png';
states[1] = 'image2.png';
states[2] = 'image3.png';
var currentState = 0;

function changeImage()
{
    var t = document.getElementById('f1');
    var src = states[currentState];
        t.src= src;
    currentState++;
    if(currentState == state.length)
    {
       currentState = 0;
    }

}

如果要选择特定图像，请尝试将参数绑定到html标记并将其传递给函数参数

Answer 4

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


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

    <script>
    function changeImage() { 
        var  specImage = document.getElementById("f1"),
             specs = document.getElementsByTagName('input');

        Array.prototype.map.call(specs, function(spec, index) {
            spec.addEventListener('click', function(event) {
                event.preventDefault(); 
                specImage.src = "image" + index + ".jpg";
            });
        });
    }
    changeImage();
    </script>

注意：这将选择页面上的所有输入，我建议按类查询元素。

单击文本框更改图像

4 个答案: