2013-02-28 71 views
0

我有一個非常簡單的字符串比較,但檢查總是失敗。我試圖加載在<img>加載基礎上,window寬度不同的圖像。兩個網址的字符串比較失敗

$(document).ready(function() { 
    var width = $(window).width(); 
    console.log(width); 
    $('.slider-image').each(function() { 
     resize_image($(this), width); 
    }); 
}); 

$(window).resize(function() { 
    var width = $(window).width(); 
    $('.slider-image').each(function() { 
     resize_image($(this), width); 
    }); 
}); 

function resize_image(image, width) { 
    console.log(width); 
    if(width >= 480 && width < 768) { 
     if(image.attr('src') != image.data('phone-src')); { 
      console.log('resize phone'); 
      image.attr('src', image.data('phone-src')); 
     } 
    } else if (width >= 768 && width < 960) { 
     if(image.attr('src') != image.data('tablet-src')); { 
      console.log('resize tablet'); 
      image.attr('src', image.data('tablet-src')); 
     } 
    } else if (width >= 960) { 
     if(image.attr('src') != image.data('desktop-src')); { 
      console.log('resize desktop'); 
      image.attr('src', image.data('desktop-src')); 
     } 
    } 
}; 

現在,我想要發生的是,don't replace the src, if the width remains within the borders。我試圖通過檢查src屬性是否已具有data屬性來執行此操作,但字符串檢查失敗,因爲它始終不相等,儘管這兩個屬性在Chrome Inspector中都是相同的。爲什麼會發生?

順便說一句,這兩個字符串是圖像的URL。

+1

什麼'的console.log(image.attr( 'SRC'),image.data( '電話-SRC'))'打印? – 2013-02-28 16:15:10

+0

在每次比較之前添加一些帶標籤的調試語句,例如 的console.log( 'DEBUG1',image.attr( 'SRC'),image.data( '電話-SRC')); 通過這種方式,您可以檢查執行哪個'if'分支以及您正在比較哪些值。 – nick 2013-02-28 16:16:32

+0

@ÁlvaroG.Vicario的「SRC」打印可點擊的鏈接,以及'data'打印非可點擊的鏈接。除此之外,它是相同的URL。 – tolgap 2013-02-28 16:38:30

回答

0

的問題是,我不得不每隔背後偷偷摸摸分號if語句...刪除那些和它的工作。

0

你可能會檢查SRC是一個字符串原始或字符串()。

new String("hi") == new String("hi"); // false 
+1

我爲什麼要這麼做?我需要調用該對象... – tolgap 2013-02-28 16:13:47

+0

對不起,更新了我的答案jQuery的方法,因爲我最初誤解了這個問題。 – 2013-02-28 16:20:45

1

爲什麼在控制檯登錄後出現額外的圓括號?

console.log('resize phone')); 

我檢查比較srcdata ATTRS,和他們相匹配。除非你的圖像沒有標記爲data-phone-src=""等,我認爲該行阻止設置src。