使用select切換圖像

Question

我對jQuery相當陌生，我試圖通過從select HTML標記獲取鏈接來切換圖像src屬性。

這是選擇HTML，我使用：

<select id="pages"> 
    <option value="Manga/Naruto/Friends/01.png">1</option> 
    <option value="Manga/Naruto/Friends/02.png">2</option> 
    <option value="Manga/Naruto/Friends/03.png">3</option> 
    <option value="Manga/Naruto/Friends/04.png">4</option> 
</select> 

這是我想爲了使用切換圖像src屬性的jQuery腳本：

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
    $("#pages").change(function(){ 
    $('#greatphoto').attr('src', val()); 
    //.val()); 
    }); 
</script> 

這是我試圖切換圖像的佔位符：

<div id="mangaImages"> 
    <img id="greatphoto" src="Manga/Naruto/Friends/01.png" /> 
</div> <!-- end of mangaImages --> 

An y幫助這將不勝感激。

Answer 1

這樣做：

$(function() { 
    $("#pages").change(function(){ 
     $('#greatphoto').attr('src', this.value); // Could use $(this).val() too. 
    }); 
}); 

與$(function() {...});包裝一下你的代碼，確保它運行之前DOM被加載。這是調用jQuery的.ready()方法的捷徑。

現在你的<select>沒有得到change事件，因爲它在代碼運行時還不存在。

Answer 2

你可以嘗試

$(this).val() 

，而不是

val()