2016-03-17 52 views
0

我以前有過以下 function,它是相當分解重複冗餘變量。所以我想改進它並將圖像存儲到數組中。但是,即使使用上一個腳本的相同上下文標記,它也不會檢測陣列中的圖像值,並將其與item相匹配。我不知道爲什麼。我設置每個項目以檢查不同圖像大小的實例,然後執行if所述的操作。爲什麼函數不能匹配變化數組的寬度和高度?

Working fiddle (non-working script):

Working fiddle: (working script):

我不是表達陣列的正確值。我覺得我正在過度思考,忽略一些小事。但我真的很難過。

var top_horizontalvert_mobile = ['320 x 50', '300 x 100', '300 x 50', '250 x 250', '120 x 60', '240 x 400', '180 x 150', '125 x 125']; 
var top_horizontal_desktop = ['729 x 90', '468 x 60'];                 
var bottom_horizontal_desktop = ['930 x 180', '336 x 280'];        
var bottom_vert_mobile = ['234 x 60']; 
var middle_vert_mobile = ['300 x 250']; 
var right_vert_desktop = ['120 x 600', '160 x 600']; 
$("#carousel-container-mobile, #carousel-container-desktop").on('slid.bs.carousel', function() { 
    $('.item').each(function() { 
     var imgs = $('.item'); 
     var w = $(img).width(); 
     var h = $(img).height(); 
     var img = $('img', this); 
     if (w == top_horizontalvert_mobile && h == top_horizontalvert_mobile) { 
     img.addClass('top, smaller-img'); 
     } 
     if (w == top_horizontal_desktop && h == top_horizontal_desktop) { 
     img.addClass('top, larger-img'); 
     } 
     if (w == bottom_vert_mobile && h == bottom_vert_mobile) {2 
     img.addClass('bottom, smaller-img'); 
     } 
     if (w == bottom_horizontal_desktop && h == bottom_horizontal_desktop) { 
     img.addClass('bottom, larger-img'); 
     } 
     if (w == middle_vert_mobile && h == middle_vert_mobile) { 
     img.addClass('middle, smaller-img'); 
     } 
     if (w == right_vert_desktop && h == right_vert_desktop) { 
     img.addClass('right, smaller-img'); 
     } 
     if (w == middle_vert_mobile && h == middle_vert_mobile) { 
     img.addClass('right, smaller-img'); 
     } 
    }); 
}); 
+0

如果元素隱藏,隱藏元素的高度和寬度將爲垃圾值。垃圾在某種意義上不是一個正確的價值。 –

回答

0

你的兩個腳本之間的主要區別是你如何比較值。

在工作腳本,你直接比較數字:

if (img.width() == 320 && img.height() == 50)

在非工作腳本,你實際上是在比較了一些與數組。

if (w == top_horizontalvert_mobile)

其中如果我們交換到多個文字值:

if (img.width() == ['320 x 50', '300 x 100', '300 x 50', '250 x 250', '120 x 60', '240 x 400', '180 x 150', '125 x 125']

並且永遠不會有其中多個將因爲數組的數組是一個不同的數據類型的條件。

基於我所看到的,你想每一個寬度和高度數組中的每個值進行比較,但這需要以下最低步驟:

  1. 將您的陣列成多 - 維數字的數組,因爲將它保留爲字符串將需要您解析出數據(這是更多的工作,而不是必要的。因此,而不是[320 x 50', '300 x 100' ...],你會[[320,50],[300,100] .. 。]

  2. 使用for循環遍歷數組的每個值,以便您可以進行比較。請參閱Codecademy's tutorial on for loops瞭解更多信息。

讓我知道如果您有任何其他問題!

作爲一個旁白,在審查了你的工作腳本並尋找你正在嘗試做的事情之後,似乎你正試圖根據圖像大小通過jQuery應用不同的樣式。您是否有理由不直接將類應用於圖像本身,因爲您對圖像尺寸似乎有非常特定的要求?

相關問題