Question

现在我正在做你在这里看到的内容：

$("#wrapper").prepend('<header> <picture> <source media="(max-width: 999px)" srcset="Images/Small/Primary-Logo.png", "Images/Small/2x/Primary-Logo.png 2x", "Images/Small/3x/Primary-Logo.png 3x"> <source media="(min-width: 1000px)" srcset="Images/Big/Primary-Logo.png", "Images/Big/2x/Primary-Logo.png 2x", "Images/Big/3x/Primary-Logo.png 3x"> <img src="" alt="Main Logo"> </picture> </header>')

我的问题是，是否有办法巧妙地将数据插入到每个来源，而无需预先添加大块文本。

例如，留下所有srcsets＆＃34;＆＃34;清空并通过附加添加网址。

我该怎么做？

Answer 1

所以，首先，这个：

srcset="Images/Small/Primary-Logo.png", "Images/Small/2x/Primary-Logo.png 2x", "Images/Small/3x/Primary-Logo.png 3x">

应该是：

srcset="Images/Small/Primary-Logo.png, Images/Small/2x/Primary-Logo.png 2x, Images/Small/3x/Primary-Logo.png 3x">

请查看more info。

这是我能想到的解决方案。看看这是否有帮助，也可以随意调整此代码以满足您的需求。

var $wrapper = $("#wrapper");

var imageSrcs = {
    "tablet": ["Images/Small/Primary-Logo.png", "Images/Small/2x/Primary-Logo.png 2x", "Images/Small/3x/Primary-Logo.png 3x"],
    "desktop": ["Images/Big/Primary-Logo.png", "Images/Big/2x/Primary-Logo.png 2x", "Images/Big/3x/Primary-Logo.png 3x"]
};

$wrapper.prepend('<header> <picture> <source media="(max-width: 999px)" data-screen="tablet"> <source media="(min-width: 1000px)" data-screen="desktop"> <img src="" alt="Main Logo"> </picture> </header>')

$wrapper.find("[data-screen]").each(function() {

    var screenType = $(this).data("screen");
    $(this).attr({
        'srcset': imageSrcs[screenType].join(", ")
    });
});

在HTML5图片srcset中附加数据

1 个答案: