Напишите атрибут "src", когда я нажимаю на изображение

Question

У меня есть этот код для создания поиска изображений через 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);
                }
            });                
        });
    });

У меня есть поле INPUT и мне нужно, когда я щелкаю IMG, значение атрибута SRC идет туда.Я пытаюсь использовать этот код, но он не работает:

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

Также по умолчанию первый код просто возвращает 4 изображения, и мне нужно более четырех, тогда мой вопрос по этому коду следующий:

1. Кто-нибудь знает, как получить более 4 изображений?
2. Может ли кто-нибудь помочь мне исправить код изображения?Я имею в виду, когда я щелкаю изображение, значение SRC должно быть в INPUT с именем # urlimagen.

Answer 1

Я бы изменил код, который вы используете для добавления своего изображения, и удостоверьтесь, что вы назначаете дескриптор события клика в то время, а не раньше.

$.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, я не знаю, можете ли вы изменить это возвращенное количество.

Answer 2

Если ваш html выглядит следующим образом:

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

.., то вы можете использовать этот javascript:

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

. Он поместит атрибут src кликаемого изображения ввход с идентификатором urlimagen.

Селектор $('.clickableImage') получает все элементы с именем класса clickableImage..click добавляет событие щелчка к каждому из этих элементов.Внутри функции $(this) будет ссылаться на изображение, на которое нажали.Используя метод 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 будет содержать массив каждого кликаемого изображения.

Answer 3

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