Question

我是JQuery的新手并且还在学习，所以我需要一些帮助。我有一个带有横幅的网页，当屏幕尺寸为480px或更低时，它将用临时图像替换横幅，使移动用户更快。非常好。但现在到了问题。当用户单击此临时图像时，它应恢复为旧图像。在这种情况下，横幅。我怎么能做到这一点？

到目前为止我的代码：

$("document").ready(function() {
    if ( $(window).width() <= 480) {
            $("#img").attr("src", "temp_image.jpg");
    }
});

HTML：

<div id="banner">
     <a href="#"><img id="img" src="banner.jpg" alt="banner" /></a>
</div>

Answer 1

你的代码看起来很好，我认为只是删除你的doc ready语句中的文档将使你的代码工作 - 为了恢复图像，你可以使用类似的东西

$(document).on('click','#img',function() {
    if( $(this).attr('src') === 'temp.jpg' ) 
    {
         $(this).attr('src','mainimg.jpg')
    }
});

但是，如果点击img元素，我不确定是否还要将其恢复为较小的图像？

Answer 2

要完全按照你的要求做，你可以将一个点击处理程序附加到img，然后让它像你在文档加载时那样替换图像。 E.G

$('#img').click(function(){
    $("#img").attr("src", "banner.jpg");
    //following line to unbind the click handler so it doesnt keep firing (even though it wont do anything)
    $('#img').unbind();
});

但是我觉得Sergios的答案对你想要的更好。

要记住一件事。你说它会“让移动用户更快”，但此时横幅图片已经加载了，而你只是将其替换为另一个，当然，这实际上会让你加载两张图片而不是一张图片。在外观方面它会看起来更好，但我认为它不会让它更快。如果我有错误的结束，请纠正我！

Answer 3

您可以将html更改为：

<div id="banner">
     <a href="#"><img id="img" src="banner.jpg" alt="banner" data-big="banner.jpg" data-small="test_image.jpg"/></a>
</div>

结果js可能会跟随（仅为了避免硬编码链接）：

$("document").ready(function() {
    if ( $(window).width() <= 480) {
            $("#img").attr("src", $("#img").data("small"));
    }

    $("#img").on("click", function () {
        var img = $("#img");
        if (img.attr("src") != img.data('big') {
            img.attr("src") = img.data('big');
        }
    });
});

将图像src恢复为小尺寸取决于您希望如何处理它，现在不知道：）

在480px或更低时，更改图像，并在单击时恢复为旧图像

3 个答案: