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

1 个答案: