Abrufen von übergeordneten IMG-Wert jQuery

Question

Ich bin auf diesem scheinbar einfachen Problem fest. Ich versuche, das Elternbild meines Produktelements zu ändern, wenn Änderungen in den Optionen erkannt werden.

$('#colors').change(function() { 
 
    var img_path = './img/' + $('#colors',this).find('.item-image').val() + $(this).val().toLowerCase()  +'.jpg'; 
 
    console.log(img_path) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Allerdings hielt ich nicht identifizierte auf den Pfad String angehängt bekommen und es macht mich verrückt.

Mein HTML sieht wie folgt aus:

<article class="product-area"> 
 
    <ul class="product-list"> 
 
    <li class="list-item"> 
 
     <img class="item-image" value="test" src="img/item-body-1.png" alt=""> 
 
     <h1 class="item-title">Aluminum road bike</h1> 
 
     <h4 class="sub-item-heading">Customisation:</h4> 
 
     <table class="customization-table"> 
 
     <tr> 
 
      <th>Color</th> 
 
      <th>Material</th> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <select id="colors" name="colors"> 
 
       <option data-color="Default">Default</option> 
 
       <option data-color="Red">Red</option> 
 
       <option data-color="Blue">Blue</option> 
 
       <option data-color="Green">Green</option> 
 
       <option data-color="Brown">Brown</option> 
 
      </select> 
 
      </td> 
 
      <td> 
 
      <select id="materials" name="materials"> 
 
       <option data-material="Alloy">Alloy</option> 
 
       <option data-material="Steel">Steel</option> 
 
       <option data-material="Carbon Fibre">Carbon Fibre</option> 
 
       <option data-material="Titanium">Titanium</option> 
 
      </select> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
     <div class="button-group"> 
 
     <button class="add-to-cart" data-name="Aluminum road bike " data-price="256">Add to cart</button> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</article>

Answer 1

Sie sollten attr() Wert und Zielelternblock erhalten, Bild zu finden.

val() -Methode funktioniert für Formularfelder, nicht für den Rest der Elemente.

$('#colors').change(function() { 
 
    var img_path = './img/' + $('.product-area').find('.item-image').attr('value') + $(this).val().toLowerCase()  +'.jpg'; 
 
    console.log(img_path) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<article class="product-area"> 
 
    <ul class="product-list"> 
 
    <li class="list-item"> 
 
     <img class="item-image" value="test" src="img/item-body-1.png" alt=""> 
 
     <h1 class="item-title">Aluminum road bike</h1> 
 
     <h4 class="sub-item-heading">Customisation:</h4> 
 
     <table class="customization-table"> 
 
     <tr> 
 
      <th>Color</th> 
 
      <th>Material</th> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <select id="colors" name="colors"> 
 
       <option data-color="Default">Default</option> 
 
       <option data-color="Red">Red</option> 
 
       <option data-color="Blue">Blue</option> 
 
       <option data-color="Green">Green</option> 
 
       <option data-color="Brown">Brown</option> 
 
      </select> 
 
      </td> 
 
      <td> 
 
      <select id="materials" name="materials"> 
 
       <option data-material="Alloy">Alloy</option> 
 
       <option data-material="Steel">Steel</option> 
 
       <option data-material="Carbon Fibre">Carbon Fibre</option> 
 
       <option data-material="Titanium">Titanium</option> 
 
      </select> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
     <div class="button-group"> 
 
     <button class="add-to-cart" data-name="Aluminum road bike " data-price="256">Add to cart</button> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</article>

P. S. Wenn mehrere Blöcke mit Klasse gleichen Eltern auf Seite sind, verwenden Sie am nächsten():

var img_path = './img/' + $(this).closest('.product-area').find('.item-image').attr('value')...