0

我正在尝试使脚本正常工作。

我有一些图像：

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

这里的目标是，在大于 1200px 的屏幕上，它将 220x446 替换为 270x572，对于小于 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')); 
   });
}

并且比其他尺寸相同......猜测它完全错误。

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

4

4 回答 4

1

You are replacing a string that doesnt exist.

When I get you right, all images have an initial source url of "image-220x466.gif". In your function, you replace this string's '270' parts with '572', which can not work since there is no "270" in "image-220x466.gif".

I am not sure why you cant just set the source directly, like so:

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

EDIT

change __ x __ for each resolution:

$('.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);
});

There seems to be some lack of understanding what .replace() does. In brief, replace takes two parameters. The first one is the string that shall be replaced and the second one defines what shall be inserted instead.

So if your string is "220x466" you can replace the 220 with something else, like so:

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

will will output "270x466"

于 2013-06-28T08:19:23.693 回答
1

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

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); 
   });
}
于 2013-06-28T08:39:00.727 回答
0

'.img' 是你应用到图像的类还是'.slider' 或两者兼而有之？如果它是“.slider”，它已应用于您想要更改的所有图像，那么您可以这样做：

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

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

于 2013-06-28T08:29:44.060 回答
-1

我在jsfiddle.net/vinhnguyenle/kw2V8/

. 请检查！

于 2013-06-29T02:56:20.017 回答