Javascript 单击图像时写入“src”属性

我有以下代码用于通过Google image API进行图像搜索：

$(document).ready(function(){
        $('#envio').click(function(){
            var iURL = "http://ajax.googleapis.com/ajax/services/search/images";
            $.ajax({
                url: iURL,
                type: 'GET',
                dataType: 'jsonp',
                data: {
                    v:  '1.0',
                    q:  $('#query').val(),
                    format: 'json',
                    jsoncallback:  '?'
                },
                success: function(data) {
                    console.log(data);
                    var html = '';
                    var j = 1;
                    $.each(data.responseData.results, function(i, v) {
                        html += '<img id="' + j + '" src="' + v.tbUrl + '" title="' + v.title + '" alt="' + v.title + '"/>';
                        j++;
                    });
                    $('body').append(html);
                },
                error: function(xhr, textStatus, error){
                    console.log(xhr.statusText, textStatus, error);
                }
            });                
        });
    });

默认情况下，第一个代码只返回4个图像，我需要4个以上的图像，然后我对这段代码的问题如下：

有人知道如何获得4张以上的图像吗？ 有人能帮我修复图像代码吗？我的意思是，当我单击一个图像时，SRC值必须在名为urlmagen的输入中。

---

我将更改用于附加图像的代码，并确保您在指定单击事件句柄时，而不是之前

$.each(data.responseData.results, function(i, v) {
    var $img = $('<img />'); // create a new image object

    // change image attributes
    $img.attr({
        'id': 'j',
        'src': v.tbUrl,
        'title': v.title,
        'alt': v.title
    });
    j++;

    // append image to DOM, remove your append statement and leave this here
    $('body').append( $img );

    $img.click( function () {
        $('#urlimagen').val( $(this).attr('src') );
    });

});

---

至于返回的4幅图像，看看您的代码，它似乎取决于data.responseData.results对象的长度，我不知道您是否可以修改返回的数量。

如果您的html如下所示：

$('img').click(function(){
        $('#urlimagen').val($(this).attr("src"));
});

<img src="..." class="clickableImage" />

它将把单击图像的src属性放入id为urlmagen的输入中

$'.clickableImage'选择器获取类名为clickableImage.的所有元素。单击将向每个元素添加一个单击事件。在函数中，$将引用单击的图像。使用attr方法，检索单击图像的src属性，并使用val方法将其设置为表单输入的值

如果您不能或不想添加类名，可以使用选择器$'img'将其应用于所有图像，但我确实建议您尽可能使用类名，以便控制涉及哪些图像

现在，如果希望将每个单击图像的值添加到输入值中，而不是替换它，请使用以下方法：

$('#urlimagen').val($('#urlimagen').val() + ($('#urlimagen').val() > 0 ? ',' : '') + $(this).attr('src');

单击的每个图像都将向列表中添加一个新项目

想要一个数组吗？使用html：

<form id="urlimages"></form>

。。使用脚本：

$('#urlimages').append('<input type="hidden" name="images[]" value="'+$(this).attr('src')+'" />');

---

在服务器端，POST将包含每个单击图像的数组。

此代码实现了与OP的目标完全相反的目标：使用更好的方法进行编辑。与使用大字符串创建HTML不同，您可以逐个单独创建每个图像，更改其属性，将其附加到DOM，并为单击事件分配句柄。这样，单击句柄将在创建图像后分配，而不是在创建之前。@Chris：当我单击图像时，SRC值必须在名为urlimagen的输入中。当用户单击时，SRC值必须在输入中，因此我认为图像crs必须成为输入的值。反之亦然-他希望将输入值设置为图像SRC。创建图像的代码肯定比使用讨厌的字符串要好，我只是认为您误解了OP的目标和单击事件。看看我的答案的评论，他发布了一个带有示例的JSFIDLE。他的问题是每件事都很奇怪，但他在AJAX成功函数有机会启动之前就应用了这些事件。我想我已经为他整理好了，但是@user719427真的应该看看这里创建图像的代码——比当前的代码好得多。我也测试了这个代码，但是如果我按照你的建议离开$body'。append img；如果我将其更改为$'body'，则不起作用；它可以工作，但当我单击任何图像时，IMG attr会因正文中的标题而更改。此代码无效。每个元素循环一个数组，如下所示，该数组将循环页面上的所有图像：$'img'。每个函数元素{/*对该元素做点什么*/}；从代码中删除了each函数它现在应该可以工作复制/粘贴失败我一定是做错了什么，因为它不工作，请看这里需要在成功函数中添加单击事件，在html附加到正文之后。很好，它可以工作，但我还有一个问题，关于data.responseData.results有一个名为unescapedull的值，我想在urlmagen中使用它，这可能吗？是的，使用unescapedull:-请花点时间阅读此代码并尝试理解它。别把这变成一个笑话，把密码给我！现在，花点时间去了解正在发生的事情。查看前面的代码，将其与此进行比较，找出我是如何完成它的，并因此增加您自己的知识。而且接受其中一个答案，然后投票给其他人：很好，我想接受你的解决方案，但我是新手，不知道如何做到这一点，我也不想得到，给我我想从贝斯特那里学习的代码，我只是问是否可能

<form id="urlimages"></form>

$('#urlimages').append('<input type="hidden" name="images[]" value="'+$(this).attr('src')+'" />');