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

演示：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，因为您已声明要动态创建图片。

Answer 2

如果通过“删除缩略图上的格式”意味着删除图片上的所有CSS，那么我认为您想要的是this。

使用jQuery选择表单内的图像

2 个答案: