點擊文本框更改圖像

我試圖製作一個帶有多個文本框的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>

來源

2014-05-20 meverhart913

現代解決方案

您可以使用新的自定義屬性data-something存儲正確的圖像。然後在javascript中檢查元素是否具有正確的屬性並顯示結果。

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') 
}

來源

2014-05-20 19:11:49 cocco

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標籤，並把它傳遞給函數的參數

來源

2014-05-20 19:01:32 Rustam

您可以將圖像文件名存儲爲data-*屬性，並使用不顯眼的J avaScript將事件處理程序分配給所有輸入。此外，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'); 
     }; 
    } 
};

注：本抓住了頁面上的所有輸入，但是你可以通過類或其他標準根據需要過濾。

來源

2014-05-20 19:11:42 MrCode

<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>

注意：這將選擇頁面上的所有投入，我建議通過查詢類的元素來代替。

來源

2014-05-20 19:37:08

點擊文本框更改圖像

回答

相關問題