2015-02-12 74 views
-1

我有一些代码,其中resize函数在运行时检查屏幕宽度并加载图像的高分辨率或标准分辨率版本。如果变量已存在,则不运行if语句

当重复调整两个CSS定义的断点宽度之间的宽度时,该脚本将-large.jpg附加到文件名,导致imagename-large-large.jpg

function resize(){ 
     $('.image').each(function() { 
     var image = $(this).find('.image img'); 
     var src = $(this).find('img').attr('src'); 
     var highRes = src.replace(".jpg", "-large.jpg"); 
     }); 
     if ($(window).width() > 1920) { 
      image.attr("src", highRes); 
     } 
     else { 
      image.attr("src", src); 
     } 
    } 

我不知道如何阻止脚本将-large.jpg附加到文件名。什么是最好的方法呢?

+0

提供您的html – 2015-02-12 00:56:47

+1

您的代码根本不起作用; “src”和“highRes”变量是该.each()'回调的局部变量。 – Pointy 2015-02-12 00:57:36

+1

有很多错误。为什么你有嵌套的图像类? – vol7ron 2015-02-12 01:14:02

回答

0

你可以searchsrc为字符串-large。如果没有找到搜索,则返回-1,如果匹配,则返回匹配的位置。

$('.image').each(function() { 
    var image = $(this).find('.image img'); 
    var src = $(this).find('img').attr('src'); 
    if(src.search('-large') !== -1){ 
     // already has -large in it 
    } 
    var highRes = src.replace(".jpg", "-large.jpg"); 
    }); 
+0

反转你的if ...这是可怕的代码风格有一个像这样的空语句块 – 2015-02-12 01:19:22

0

试试这个:

function resize(){ 
    $('.image').each(function() { 
    var image = $(this).find('.image img'), 
     src = $(this).find('img').attr('src') 
     isLarge = /\-large/.test(src); 
    if ($(window).width() > 1920 && !isLarge) { 
     image.attr("src", src.replace(".jpg", "-large.jpg")); 
    } 
    else if (isLarge) { 
     image.attr("src", src.replace("-large.jpg", ".jpg")); 
    } 
    }); 
} 

我们只能更换SRC如果需要改变它。