属性包含选择器到数组

问题描述：

我试图搜索一组图像的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);

答

在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标签替换为拇指数组中所有剩余的条目。

答

$('#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')) } 
});

不清楚你想要什么有任何所做的前两后...

答

$('#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); 
});

属性包含选择器到数组

相关推荐