javascript - 抓取指定的图像源并将其添加到输入表单中

Question

我正在尝试执行以下操作：单击每个图像（缩略图）源时，应将其写入指定的输入。我已经做过那种......现在还不能很好地工作！

• 它不会添加正确的源，只是始终是第一个源，无论单击什么图像。

• 如果再次单击相同/不同的图像，它不会删除添加的源。

// 一段 jQuery 脚本：

var imgSource = $('#textures li').find('img').attr('src');

$('ul#textures li img').on('click', function() {
    $('input#imgPath').val($('input#imgPath').val() + imgSource);
});​

Fiddle 以便更好地理解： JS Fiddle 链接

PS您的答案的解释将不胜感激！

Answer 1

attr只返回第一个匹配元素的属性，你可以使用this关键字来引用被点击的元素。

$('ul#textures li img').on('click', function() {
    $('#imgPath').val(this.src)
});

http://jsfiddle.net/Uz6rc/

Answer 2

使用： $(this) - 表示 click 元素的属性

 $('ul#textures li img').on('click', function() {
    $('input#imgPath').val($('input#imgPath').val() + $(this).attr('src'));
});​

Answer 3

看看：http: //jsfiddle.net/e3HzQ/

来自jQuery 文档：

.attr() 方法仅获取匹配集中第一个元素的属性值。

您的imgSource变量是在事件处理程序之外声明的，因此它不会根据单击的图像改变其值 - 它只是保持第一张图像的值。

此外，不会删除先前的值，因为您将该值附加到已经存在的值。

Answer 4

干得好：

$('ul#textures li img').on('click', function() {
    var imgSource = $('#textures li').find('img').attr('src');
    $('input#imgPath').val($(this).attr("src"));
});

演示

它不适合你的原因是因为你已经定义了

var imgSource = $('#textures li').find('img').attr('src');

在 on 函数之外。然后，您每次都在文本框中设置相同的值，使用：

$('input#imgPath').val($('input#imgPath').val() + imgSource);

我修改了这一行以使用此运算符获取 img src。