屬性包含選擇器到數組

Question

我試圖搜索一組圖像的SRC，然後返回所有匹配的字符串。我構建的電子商務系統非常有限，沒有辦法將圖像鏈接到它的變體，這就是爲什麼我必須搜索所有圖像的列表，然後返回匹配的src。 （我還使用的IF語句是這樣的話，客戶可以使用所見即所得，並添加新的色彩機架）

jQuery(document).ready(function($) { 
     $('#product-variants-option-0').change(function() { 
     var select_value, keyword, new_src; 


     select_value = $(this).find(':selected').val(); 

     if (select_value == "Kelly Green") { keyword = "kelly"; }; 
     if (select_value == "Navy") { keyword = "navy"; }; 
     if (select_value == "Gunmetal Heather") { keyword = "gunmetal"; }; 
     if (select_value == "Olive") { keyword = "olive"; }; 
     if (select_value == "Cocoa") { keyword = "cocoa"; }; 
     if (select_value == "Black") { keyword = "black"; }; 
     if (select_value == "Charcoal") { keyword = "charcoal"; }; 
     if (select_value == "Dark Teal") { keyword = "teal"; }; 
     if (select_value == "White") { keyword = "white"; }; 
     if (select_value == "Black") { keyword = "black"; }; 
     if (select_value == "Garnet") { keyword = "garnet"; }; 
     if (select_value == "Charcoal Heather") { keyword = "charcoal-heather"; }; 


     // Find the image using that `src`, note that we concatenate the value 
     // from `keyword`, rather than having it in a literal. 
     var new_src = $('#preload img[src*=' + keyword + ']').attr('src'); 

     var large_src = new_src.replace('medium','large'); 

     // Set the image's source. 
     $('div.image img').attr('src', large_src); 
     }); 
    }); 

這工作完全，對一個圖像。但我需要

var new_src = $('#preload img[src*=' + keyword + ']').attr('src'); 

作爲一個數組。然後其餘全部通過第一匹配SRC到

$('div.image img').attr('src', large_src); 

然後到另一DIV

$('div.thumbs img').attr('src', new_src); 

Answer 1

在my answer to your previous question，我包括一個函數attrAll返回src值的陣列。那麼你只需要索引它。

這裏再次證明功能：

// A utility function from my arsenal; you can 
// just inline this if you don't want it. 
// Returns an array containing the given attribute 
// from *all* of the elements in the jQuery object. 
// Args: 
// name  Name of the attribute to fetch 
// blanksOkay (Optional, default false) true if 
//    you want blanks in the array for 
//    blank entries or non-existant entries; 
//    false if you want them left out. 
$.fn.attrAll = function(name, blanksOkay) { 
    var list, index; 

    if (typeof blanksOkay === "undefined") { 
    blanksOkay = false; 
    } 

    list = []; 
    for (index = 0; index < this.length; ++index) { 
    entry = $(this[index]).attr(name); 
    if (entry || blanksOkay) { 
     list.push(entry); 
    } 
    } 
    return list; 
}; 

用法：

var srcArray = $('#preload img[src*=' + keyword + ']').attrAll('src'); 

傳遞 「...第一個匹配的SRC」：

$('div.image img').attr('src', srcArray[0]); 

我不知道你是什麼意思是「...然後所有的其餘部分到另一個div」，但它是一個數組，你可以用通常的方式從它得到值，並使用它們來添加img標籤到一個div或任何其他。

也許你的意思是你想讓所有其他圖像在div.thumbs中爲img標籤。如果是這樣，從that answer另一個通用功能可能是有用的：

// Join the entries in the array with the given 
// prefix and suffix. 
function joinEntries(a, prefix, suffix) { 
    prefix = prefix || ''; 
    suffix = suffix || ''; 
    return prefix + a.join(suffix + prefix) + suffix; 
} 

...因爲這樣你可以這樣做：

$('div.thumbs').html(joinEntries(srcArray.slice(1), "<img src='", "'>")); 

...與img標籤替換爲拇指數組中所有剩餘的條目。

Answer 2

$('#preload img[src*=' + keyword + ']').each(function(index) { 
    if (index == 0) { $('div.image img').attr('src', $(this).attr('src')) } 
    if (index == 1) { $('div.thumbs img').attr('src', $(this).attr('src')) } 
}); 

不清楚你想要什麼有任何所做的前兩後...

Answer 3

$('#preload img[src*=' + keyword + ']').each(function(){ 
    var large_src = $(this).attr('src').replace('medium','large'); 
    // Set the image's source. 
    $(this).attr('src', large_src); 
});