Wie wähle ich das n-te Bild in Javascript

Question

Ich versuche, den Code in Javascript für meine Shopify Shop ändern, was ich versuche zu tun ist, wenn eine Farbe Option eines Produkts ausgewählt ist, ändert sich die Funktionen Bilder zu das zweite oder dritte Bild der Variante (jede Variante hat 5 Bilder), gerade jetzt, wie Sie aus dem Code sehen können, ändert es sich nur auf das Featured Bild, ich würde mich freuen, wenn Sie mir dabei helfen können, danke im Voraus !

/** 
    * Trigger event when variant image changes 
    * 
    * @param {object} variant - Currently selected variant 
    * @return {event} variantImageChange 
    */ 
    _updateImages: function(variant) { 
     var variantImage = variant.featured_image || {}; 
     var currentVariantImage = this.currentVariant.featured_image || {}; 

     if (!variant.featured_image || variantImage.src === currentVariantImage.src) { 
     return; 
     } 

     this.$container.trigger({ 
     type: 'variantImageChange', 
     variant: variant 
     }); 
    }, 

    /** 

Answer 1

Wenn Sie genau wissen, welche Bild Sie gerade auf Array-Positionierung basieren müssen, würde der Code ziemlich einfach sein:

var all_images = document.querySelectorAll(some_css_selector_string); 
var image_i_want = all_images[some_index]; 

Der schwierige Teil ist zu wissen, welchen Arrayindex Sie wollen - und die vorgestellten Bild für jede Variante (wenn Sie für jede Variante individuell angepasste Bilder eingerichtet haben) sollte Ihnen die richtigen Bildinformationen geben. (Möglicherweise möchten Sie auch Ihr Produkt im Shopify-Administrator überprüfen, um sicherzustellen, dass jede einzelne Variante über ein entsprechendes Bildset verfügt.) Wenn dies immer noch nicht funktioniert, können Sie diesem Code eine console.info(variant) hinzufügen, damit Sie ihn überprüfen können die verfügbaren Informationen, so dass Sie basierend auf dem, was die Variante tatsächlich darstellt, sinnvolle Entscheidungen treffen können.

Zum Beispiel, wenn Ihr Bild Benennungsschema mit den Namen der Optionen der Varianten konsistent ist, können Sie die Werte in variant.option1/variant.option2/variant.option3 verwenden, um die zu erwartenden Bildnamen zu montieren und den Image-Tag aktualisieren auf dieser Grundlage.

(BTW: Der Code, der das Bild tatsächlich zu aktualisieren ist, ist wahrscheinlich in einer Funktion, die für die ‚variantImageChange‘ Ereignis hören ist - der Code, den Sie zur Verfügung gestellt haben nicht direkt auf der Seite etwas zu ändern)

Hope Diese hilft!