0

我对 JQuery 完全陌生，还在学习，所以我需要一些帮助。我有一个带有横幅的网页，当屏幕尺寸为 480 像素或更少时，它将用临时图像替换横幅，以使移动用户更快。这么好。但现在问题来了。当用户单击此临时图像时，它应该恢复为旧图像。在这种情况下，横幅。我怎样才能做到这一点？

到目前为止我的代码：

$("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>
4

3 回答 3

0

您的代码看起来不错，我认为只需在您的 doc ready 语句中从文档周围删除 " 将使您的代码工作 - 为了恢复图像，您可以使用类似的东西

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

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

于 2013-03-06T10:54:08.403 回答
0

要完全按照您的要求进行操作，您可以将点击处理程序附加到 img，然后让它替换图像，就像您在加载文档时所做的那样。例如

$('#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 的答案更适合您想要的。

要记住一件事。你说它会“让移动用户更快”，但此时横幅图像已经加载，你只是用另一个替换它，当然这实际上会使它变慢，因为你正在加载两个图像而不是一个。就外观而言，它看起来会更好，但我认为它不会让它更快。如果我有错误的一端，请纠正我！

于 2013-03-06T10:59:19.483 回答
0

您可以将您的 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 恢复为小尺寸取决于您希望如何处理它，暂时不知道 :)

于 2013-03-06T11:01:11.570 回答