ändern Bild bei der Auswahl, auf der Suche Liste für die src-Wert jQuery

Question

Kann jemand etwas sehen, die mit diesem Code falsch ist es einfach nicht funktioniert ...

sollte klar sein, was ich versuche

zu tun

jQuery(document).ready(function($) { 
    $('#product-variants-option-0').change(function() { 

    // What is the sku of the current variant selection. 
    var select_value = $(this).find(':selected').val(); 

      if (select_value == "Kelly Green") { 
      var keyword = "kly"; 
      }; 

    var new_src = $('#preload img[src*="kly"]'); 

     $('div.image').attr('src', new_src); 

    }); 
}); 

Die Auswahl:

<select class="single-option-selector-0" id="product-variants-option-0"> 
<option value="Kelly Green">Kelly Green</option> 
<option value="Navy">Navy</option> 
<option value="Olive">Olive</option> 
<option value="Cocoa">Cocoa</option> 
</select> 

ich versuche, eine ungeordnete Liste zu suchen:

<ul id="preload" style="display:none;"> 
<li>0z-kelly-green-medium.jpg</li> 
<li>0z-olive-medium.jpg</li> 
</ul> 

Answer 1

Ich glaube, dass das Problem ist diese Linie:

var new_src = $('#preload img[src*="kly"]'); 

Dies legt ein Element auf die Variable new_src, anstatt eine Zeichenfolge; was bedeutet, dass, wenn Sie versuchen, die src in der folgenden Zeile zu ändern:

$('div.image').attr('src', new_src); 

Sie effektiv einen DOM-Knoten in ein Attribut eingefügt, die arbeiten unwahrscheinlich ist.

Versuchen:

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

Unter der Annahme, dass ein gültiges $('#preload img[src*="kly"]')img Element zurückkehrt, jede mögliche Weise; von dem, was ich von Ihrer geposteten ul sehen kann, enthält es Textzeichenfolgen (aber das könnte der Mark-down-Editor bei der Arbeit sein).

---

Bearbeitet als Reaktion auf weitere Kommentare.

Hat es Ihnen aufgetreten, dass kein Bild im #preloadul existiert, die die Zeichenfolge ‚kly‘ enthält? Dies ist wahrscheinlich das Hauptproblem, das Sie haben. Ich habe die Liste über JS Fiddle, for demo purposes kopiert und diese Version scheint zu funktionieren:

$('select').change(
    function(){ 
     if ($(this).val().toLowerCase() == 'kelly green') { 
      var keyword = 'kelly'; 
     } 
     else { 
      var keyword = $(this).val().toLowerCase(); 
     } 
     $('#alert').text($('#preload img[src*='+keyword+']').attr('src')) 
    }); 

Es sicherlich verniedlicht werden könnte, aber es funktioniert (zumindest angesichts der Informationen, die ich bisher bekommen habe).