Question

我有一些jquery会在屏幕尺寸低于600像素时替换图像。

<script type="text/javascript">
    jQuery(window).on("load resize", function (e) {
        jQuery(function () {
            if (jQuery(window).width() <= 600) {
                jQuery("img").each(function () {
                    jQuery(this).attr("src", jQuery(this).attr("src").replace("img/my_safe_net_hero_img_knight_2014_2.jpg", "img/my_safe_net_knight_mob_version_2014.png"));
                });
            }

        });
    });
</script>

这样可行，但如果您想再次放大屏幕，则会保留较小的图像。我以为我可以通过添加else语句来修复它，但它不起作用。当我这样做时，似乎打破了整个事情。

<!--Hero Image Replacement-->
<script type="text/javascript">
    jQuery(window).on("load resize", function (e) {
        jQuery(function () {
            if (jQuery(window).width() <= 600) {
                jQuery("img").each(function () {
                    jQuery(this).attr("src", jQuery(this).attr("src").replace("img/my_safe_net_hero_img_knight_2014_2.jpg", "img/my_safe_net_knight_mob_version_2014.png"));
                });
            }
            else {
                jQuery(this).attr("src", jQuery(this).attr("src").replace("img/my_safe_net_knight_mob_version_2014.png" , "img/my_safe_net_hero_img_knight_2014_2.jpg" ));
            };
        });
    });
</script>

上面的脚本有什么问题。我应该使用不同的东西来实现这个目标吗？

这是Fiddle of my code

Answer 1

试试这个：

http://jsfiddle.net/kgnfqbxs/1/

    jQuery(window).on("load resize", function (e) {
             if (jQuery(window).width() <= 600) {
                jQuery("img").each(function () {
                    jQuery(this).attr("src", jQuery(this).attr("src").replace("http://placehold.it/350x150", "http://placehold.it/150x150"));
                });
             } else {
                jQuery("img").each(function () {
                    jQuery(this).attr("src", jQuery(this).attr("src").replace("http://placehold.it/150x150", "http://placehold.it/350x150"));
                });
             }

    });

请注意，这将无用地循环页面中的每个图像，有更好的方法，如果可以的话，比如给你的图像一个id =＆＃34; myimage＆＃34;然后只是：

jQuery("#myimage").attr("src","http://placehold.it/150x150");

jQuery("#myimage").attr("src","http://placehold.it/350x150");

jquery图像替换屏幕尺寸调整

1 个答案: