使用JSON文件運行onclick函數

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"; 
    } 
}