Question

我正在努力让脚本正常运行。

我有一些图片：

图像270x572.gif
image-220x466.gif（默认）
图像166x352.gif

这里的目标是在大于1200px的屏幕上取代270x572中的220x446，而对于小于980的屏幕，则取代220x446到166x352。

我认为这是非常基本的jQuery，但我就是这样的菜鸟，无法让它发挥作用。

这就是我得到的：

if($(window).width() > 1199) {
    $('.slider .img').each(function() {
        var element = $(this);
        var src = $(this).attr('src');
        element.attr('src', src.replace('270','572')); 
   });
}

与其他尺寸相同......猜测它的全部错误。

希望得到一些帮助，谢谢。 /保

Answer 1

您正在替换不存在的字符串。

当我找到你的时候，所有图片的初始源网址都是“image-220x466.gif”。在你的函数中，你将这个字符串的'270'部分替换为'572'，由于“image-220x466.gif”中没有“270”，因此无法正常工作。

我不确定为什么你不能直接设置源代码，如下所示：

element.attr('src', 'image-270x572.gif');

编辑

为每个分辨率更改__ x __：

$('.slider .img').each(function() {
    var element = $(this),
        src = $(this).attr('src'),
        newSrc;

   if ( $(window).width() > 1199) {
    newSrc = src.replace('220', '270');
    newSrc = src.replace('466', '572');
   }
   else if () {

   }
   else if () {

   }

   element.attr('src', newSrc);
});

似乎缺乏对.replace（）的理解。简而言之，replace有两个参数。第一个是要替换的字符串，第二个是定义要插入的字符串。

因此，如果您的字符串是“220x466”，您可以用其他内容替换220，如下所示：

"220x466".replace("220", "270");

将输出"270x466"

Answer 2

我的代码。它有一个限制 - 文件名必须只有一个“ - ” - 分割名称和大小。

http://jsfiddle.net/mattydsw/Gg79q/

if($(window).width() > 1199) {
    $('.slider .img').each(function() {
        var element = $(this);
        var src = element.attr('src');
        var name = src.split("-");
        var ext = name[name.length-1];
        ext = (ext.split("."))[1];
        name = name[0];
        var newSize = "270x572";
        var newSrc = name + "-" + newSize + "." + ext;
        alert(newSrc);
        element.attr('src', newSrc); 
   });
}

Answer 3

'.img'是您已应用于图片的类，还是'.slider'或两者兼而有之？如果它是'.slider'已经应用于你想要改变的所有图像，那么你可以采用以下方法：

$(function(){
  $(".slider").each(function(){
     var current = $(this).attr("src");
     var newSrc = current.replace('270', '572');
     $(this).attr("src", newSrc);
  });
});

我使用两个变量来帮助您更好地理解我的答案。您可以在不使用变量的情况下将这些行组合成一行。

Answer 4

我在jsfiddle.net/vinhnguyenle/kw2V8/

做了一些例子

。请查看！

根据屏幕大小更改图像源

4 个答案: