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>

然而，我一直被不明身份附加到路径字符串上，这让我发疯了。

我的HTML看起来像这样：

<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

您应该获取attr（）值和目标父块，以查找图像。

val（）方法适用于表单字段，而不适用于其余元素。

＆＃13;

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

＆＃13;

<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>

＆＃13;

P.S。如果页面上有多个具有相同父类的块，请使用nearest（）：

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

检索父img值jQuery

1 个答案: