組合框的一個事件函數來改變圖像源

我有4個三元組的一種形式：2組合框和1張圖片

需要改變圖像源作爲第一+第二組合框

（組合框的值作爲圖像文件名.PNG的組合）

如何命名/編號的所有組合框，以獲取onchange事件處理所有這些？哪個功能可以處理它們？

<form name="myform"> 

<select name="first" id="1" onchange="show();"> 
    <option value="dog">Dog</option> 
    <option value="cat">Cat</option> 
</select> 
<select name="color" id="1" onchange="show();"> 
    <option value="white">White</option> 
    <option value="black">Black</option> 
</select> 
<img src="Dog-White.png"> 
<br/> 

<select name="first" id="2" onchange="show();"> 
    <option value="dog">Dog</option> 
    <option value="cat">Cat</option> 
</select> 
<select name="color" id="2" onchange="show();"> 
    <option value="white">White</option> 
    <option value="black">Black</option> 
</select> 
<img src="Cat-White.png"> 
<br/> 

<select name="first" id="3" onchange="show();"> 
    <option value="dog">Dog</option> 
    <option value="cat">Cat</option> 
</select> 
<select name="color" id="3" onchange="show();"> 
    <option value="white">White</option> 
    <option value="black">Black</option> 
</select> 
<img src="Dog-Black.png"> 
<br/> 

<select name="first" id="4" onchange="show();"> 
    <option value="dog">Dog</option> 
    <option value="cat">Cat</option> 
</select> 
<select name="color" id="4" onchange="show();"> 
    <option value="white">White</option> 
    <option value="black">Black</option> 
</select> 
<img src="Cat-Black.png"> 
<br/> 

</form>

來源

2015-05-01 user3294104

的ID必須是唯一的，不應該以數字開頭。這是無效的HTML。 – Xufox

**注意：** ID必須是唯一的 – Anton

對於此事件委派非常有用。您可以將'change'事件監聽器_分配給'form'_，並檢查這些'selected'中的哪一個等於'e.target'和它的'.value'是什麼，並相應地更改圖片。 – Xufox

你不能有相同的ID與多個元素。
你應該避免使用<br/>
避免有這麼多事件列表。

HTML代碼：

<form class="myform"> 
<div> 
<select name="first" class="imgsrcfirst"> 
    <option value="dog">Dog</option> 
    <option value="cat">Cat</option> 
</select> 
<select name="color" class="imgsrccolor"> 
    <option value="white">White</option> 
    <option value="black">Black</option> 
</select> 
<img src="Dog-White.png"> 
</div> 

<div> 
<select name="first" class="imgsrcfirst"> 
    <option value="dog">Dog</option> 
    <option value="cat">Cat</option> 
</select> 
<select name="color" class="imgsrccolor"> 
    <option value="white">White</option> 
    <option value="black">Black</option> 
</select> 
<img src="Cat-White.png"> 
</div> 

<div> 
<select name="first" class="imgsrcfirst"> 
    <option value="dog">Dog</option> 
    <option value="cat">Cat</option> 
</select> 
<select name="color" class="imgsrccolor"> 
    <option value="white">White</option> 
    <option value="black">Black</option> 
</select> 
<img src="Dog-Black.png"> 
</div> 

<div> 
<select name="first" class="imgsrcfirst"> 
    <option value="dog">Dog</option> 
    <option value="cat">Cat</option> 
</select> 
<select name="color" class="imgsrccolor"> 
    <option value="white">White</option> 
    <option value="black">Black</option> 
</select> 
<img src="Cat-Black.png"> 
</div> 

</form>

jQuery代碼：

$('.myform .imgsrcfirst').change(function(){ 
      var $p = $(this).parent(); 
      $p.find('img').prop('src',$(this).val()+$p.find('.imgsrccolor').val()+'.png'); 

    }); 
$('.myform .imgsrccolor').change(function(){ 
      var $p = $(this).parent(); 
      $p.find('img').prop('src',$p.find('.imgsrcfirst').val()+$(this).val()+'.png'); 

    });

來源

2015-05-01 08:40:11 vinayakj

組合框的一個事件函數來改變圖像源

回答

相關問題