javascript - 使用 jQuery 向 div 添加一些 HTML

Question

我有这个 HTML

<div class="picture"></div>

根据视口(viewport)宽度，我想向 div 添加小图像或大图像，这样它看起来像这样:

<div class="picture"><img src="small.jpg></div>

这是我在网上某处找到的一些 jQuery，它似乎完全符合我的要求。我现在卡住的唯一部分是 img src="....jpg" 东西。我如何将它转换为 jQuery？

jQuery(document).ready(function() {
    $(window).resize(function() {
        var window_width = $(document).width();
        if (window_width <= 1024) {

            img src = "small.jpg"

        } else {

            img src = "large.jpg"

        }
    });
});

谢谢!

Answer 1

如果您正在创建 <img>

$(window).resize(function() {
    var window_width = $(document).width();
    if (window_width <= 1024) {
        $(".picture").html("<img src='small.jpg'>");
    } else {
        $(".picture").html("<img src='large.jpg'>");
    }
});

或者如果您只想分配一个来源，

$(window).resize(function() {
    var window_width = $(document).width();
    if (window_width <= 1024) {
        $(".picture").find("img").attr("src", "small.jpg");
    } else {
        $(".picture").find("img").attr("src", "large.jpg");
    }
});