Question

如何将“_small.jpg”添加到我在一个名为“横幅”的div中的一堆图像的img src中？

我有一个jQuery脚本正在监听窗口调整大小 - 当低于400px时，我想更改图像的img src，最后包含“_small.jpg”以调用小图像源。所以......

<img src="example.jpg" />

当在480px以下的屏幕尺寸下观看时，将变为

<img src="example_small.jpg" />

我该怎么做？

P.S。我希望脚本循环遍历“横幅”div中的所有图像以更新它们btw：）

Answer 1

你可以这样做：

$("div.banners img").each(function() {
    $(this).attr("src", function() {
        var src = this.src.split(".")[0];
        return src + "_small.jpg";
    });
});

（以上假设图像名称中没有“。”，并且都具有JPEG类型

Answer 2

您可以尝试：

var src = $('img').attr('src'),
    ext = src.substr( src.lastIndexOf('.') );

src = src.replace(ext, '_small' + ext, src);

$('img').attr('src', src);

或者使用正则表达式：

var src = $('img').attr('src'),
    src = src.replace(/(\..*)$/, '_small$1', src);

$('img').attr('src', src);

Answer 3

您可以尝试：

// define this somewhere in your code (credit: https://stackoverflow.com/questions/280634/endswith-in-javascript)
function endsWith(str, suffix) {
    return str.indexOf(suffix, str.length - suffix.length) !== -1;
}

if ($(window).width() < 480) {
  $("div.banners img").each(function() {
    if (!endsWith($(this).attr('src'), '_small.jpg')) {
      // if you have more than "jpg" files you will want to replace those as well
      $(this).attr('src', $(this).attr('src').replace(/\.jpg/, '') + '_small.jpg');
    }
  });
}

我相信应该这样做！

修改 - 根据评论添加了扩展程序删除功能。有关替换扩展程序的详细信息，请参阅this stack。

编辑2 - 添加了对“endswith”的检查，以防对已添加小扩展名的项目调用该函数！。

jQuery追加img src

3 个答案: