2015-02-12 19 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如果需要改變它。