親imgの値を取得するjQuery

Question

私はこの一見簡単な問題に固執しています。オプションで変更が検出されると、私の商品アイテムの親イメージを変更しようとしています。

$('#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>

しかし、私はパス文字列に追加未確認取得し、それは狂気私を運転だまま。あなたがATTR（）の値を取得し、画像を検索するために、親のブロックをターゲットとすべき

<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

：

私のHTMLは次のようになります。

val（）メソッドはフォームフィールドで機能し、残りの要素では機能しません。

$('#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.同じ親クラスを持つ複数のブロックがページ上にある場合、）（最も近い使用：

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