运行带有 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";
    }
}

运行 带有 JSON 文件的函数 onclick

Running a function onclick with a JSON file

json

function

onclick

reddit

运行带有 JSON 文件的函数 onclick