使用jQuery

Question

一個表單中選擇圖像

我有一個動態顯示包含在目錄中的所有圖像的縮略圖一些服務器端的PHP代碼：

<form> 
    <input type="hidden" name="animal"> 
    <div id="thumbs"> 
\\ Dynamically created thumbnails start 
    <img src="images/bat.jpg"> 
    <img src="images/cat.jpg"> 
    <img src="images/rat.jpg"> 
\\ Dynamically created thumbnails end 
    </div> 
</form> 

我想正確的jQuery的語法，這樣當用戶上的圖像的一個點擊它：

• 刪除邊框樣式，從所有的縮略圖
• 亮所選的縮略圖加入了彩色邊框
• 將表單域「animal」的值更改爲圖像中顯示的文件名。

任何幫助非常感謝。

Answer 1

如果通過「刪除縮略圖上的格式」意味着刪除圖像上的所有CSS，那麼我認爲你想要的是this。

Answer 2

演示：http://jsfiddle.net/9rFKB/

jQuery的

$('#thumbs').delegate('img', 'click', function() { 
    var $this = $(this); 
    // Clear formatting 
    $('#thumbs img').removeClass('border-highlight'); 

    // Highlight with coloured border 
    $this.addClass('border-highlight'); 

    // Changes the value of the form field "animal" to the file name shown in the image. 
    $('[name="animal"]').val($this.attr('src').substring($this.attr('src').lastIndexOf('/')+1)); 
    alert($('[name="animal"]').val()); 
}); 

CSS

.border-highlight { 
    border:5px dashed red; 
} 

我用delegate代替click既然你說，圖像是要創建動態。