题
我正在尝试搜索一组图像的SRC,然后返回所有匹配字符串的图像。我正在建立一个非常限制的电子商务系统上,无法将图像链接到其变体,因此这就是为什么我必须搜索所有图像的列表,然后返回匹配的SRC。 (我还使用IF语句的架子,以便客户可以使用Wysiwyg并添加新颜色)
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);
解决方案
在 我对您以前问题的回答, ,我包括一个函数 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或其他。
也许您的意思是您希望所有其他图像都是 img
标签 div.thumbs
. 。如果是这样, 其他 通用功能 那答案 可能有用:
// 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);
});
不隶属于 StackOverflow