Jquery 根据屏幕大小更改图像源

我在试着让脚本正常工作

我有一些图片：

• image-270x572.gif
• image-220x466.gif（默认）
• image-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')); 
   });
}

和其他尺寸的一样。。。。猜错了

我很乐意帮忙，谢谢。

---

/Paul

您正在替换一个不存在的字符串

如果我没弄错，所有图像的初始源url都是“image-220x466.gif”。在函数中，将此字符串的“270”部分替换为“572”，因为“image-220x466.gif”中没有“270”，所以该部分无法工作

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

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

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

编辑

更改每个分辨率的_ux _uuuu：

$('.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，如：

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

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

---

将输出

“270x466”

是“.img”应用于图像的类还是“.slider”或两者都是？如果是“.slider”，它已应用于所有要更改的图像，下面是如何进行更改：

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

---

我用两个变量来帮助你更好地理解我的答案。您可以将这些行合并为一行，而无需使用vars。

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

---

我在

jsfiddle.net/vinhnguyenle/kw2V8/

---

。请退房

在控制台中是否有错误？由于您提供的代码中没有右括号，因此也可以使用css媒体查询。请您解释一下，猜测其全部错误是什么意思。“你有没有遇到什么错误或问题？”阿尔瑟哈尔玛：嗯，没有，但这根本没什么用。我确实在我这边关上了。确实在这里添加了它，谢谢。@matty我知道，但是图像是通过CMS+上传的，它们位于滑块中，因此这不是一个选项。由于图像是通过CMS上传的，文件名是动态的。文件名中的度量值不是，它们总是如上所述。这些信息以前可能会很好：）等待编辑答案哦哦，文件名中的“270”和“572”是第1个和第2个度量值，是吗？请在此处发布您答案的代码。现在我们必须复制/粘贴您的URL以查看它，而StackOverflow本身非常适合发布代码。