Attribut enthält Selektor in Array

Question

Ich versuche, die SRC einer Reihe von Bildern zu suchen und dann alle zurückgeben, die einer Zeichenfolge entsprechen. Ich stütze mich auf ein E-Commerce-System, das sehr restriktiv ist, es gibt keine Möglichkeit, ein Bild mit seiner Variante zu verknüpfen, deshalb muss ich eine Liste aller Bilder durchsuchen und dann die übereinstimmenden src zurückgeben. (Ich verwende auch einen Rack von IF-Anweisungen ist dies so dass der Kunde die WYSIWYG verwenden kann und neue Farben)

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); 
     }); 
    }); 

Das funktioniert perfekt, für ein Bild. Aber ich brauche

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

als ein Array. dann die erste abgestimmte SRC zu

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

dann den Rest an einen anderen übergeben div

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

Answer 1

In my answer to your previous question, enthalten I eine Funktion attrAll daß die Anordnung von src Werte zurückgibt. Dann müssen Sie nur hinein indizieren.

Hier ist die Funktion wieder:

// 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; 
}; 

Verbrauch:

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

Passing "... die erste angepasst SRC":

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

Ich bin nicht sicher, was Sie Mit "... dann den ganzen Rest zu einem anderen Div" bedeuten, aber es ist ein Array, Sie können die Werte davon auf die übliche Weise erhalten und sie verwenden, umhinzuzufügenTags zu einem Div oder was auch immer.

Vielleicht haben Sie gemeint, dass Sie möchten, dass alle anderen Bilder img Tags im div.thumbs sind. Wenn ja, andere Allzweckfunktion von that answer kann nützlich sein:

// 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; 
} 

... denn dann können Sie dies tun:

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

..., die für den Daumen mit img Tags ersetzt alle verbleibenden Einträge im Array.

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

nicht klar, was Sie mit irgend nach den ersten beiden getan wollen ...

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); 
});