Запуск функции onclick с файлом JSON

Question

Так что я пытаюсь запустить функцию, когда я нажимаю на изображение. Он работает с обычным изображением, но я получаю изображения из reddit JSON-файла. Мне нужно, чтобы изображения изменялись отдельно, и я не могу понять, как это сделать. Это, наверное, что-то простое, но я все еще новичок в кодировании, поэтому любая помощь будет отличной.

$.getJSON("http://www.reddit.com/r/pcmasterrace/.json?jsonp=?", function (data) { 
$.each(data.data.children, function (i, item) { 
    IsValidImageUrl(item.data.url, function (url, isvalid) { 
     if (isvalid) { 
      $('<img/>').attr('src', item.data.url) 
       .appendTo('#images') 
       .width(500) 
       .onclick = function() {Resize()}; 
      } 
     }); 
    }); 
}); 

Является ли функция правильной?

function Resize() { 
if (document.getElementById('<img/>').style.width === "500px") { 
    document.getElementById('<img/>').style.width = "1000px"; 
} else { 
    document.getElementById('<img/>').style.width = "500px"; 
    } 
} 

Я думаю, что ('<img/>') может быть неправильным. Я тестировал его с ('test'), и он работал, поэтому мне нужно, чтобы оно было чем-то другим? Он работал с моей тестовой функцией, поэтому работала .click, поэтому я думаю, что она пытается изменить неправильную вещь.

Answer 1

onclick является свойством элементов DOM, а не объектов jQuery. Вы должны использовать функцию click(), чтобы добавить обработчик кликов.

.getJSON("http://www.reddit.com/r/pcmasterrace/.json?jsonp=?", function (data) { 
    $.each(data.data.children, function (i, item) { 
     IsValidImageUrl(item.data.url, function (url, isvalid) { 
      if (isvalid) { 
       $('<img/>').attr('src', item.data.url) 
        .appendTo('#images') 
        .width(500) 
        .click(function() {Resize(this)}); 
      } 
     }); 
    }); 
}); 

Ваша Resize функция должна принимать аргумент говорить то, какое изображение изменится:

function Resize(image) { 
    if (image.style.width == "500px") { 
     image.style.width = "1000px"; 
    } else { 
     image.style.width = "500px"; 
    } 
}