Question

我回答了一个问题并意识到我犯了一些错误，我重新想到他们这样做我认为我会再次提出一个干净的问题。

我有一个选择列表，

<select id="product-variants" name="id">
<option title="AFX4000ZC-KLYSM" value="54964022" id="variant-54964022">Kelly Green</option>

<option title="AFX4000ZC-GAR3X" value="55708562" id="variant-55708562">Garnet</option>

<option title="AFX4000ZC-CHTXL" value="55708752" id="variant-55708752">Gun metal Heather</option>
</select>

选择后我需要搜索此UL

<ul style="display: none;" id="preload">

          <li>
             <img alt="" src="http://mysite.com/s/files/1/0055/1242/products/afx4000z-gunmetal-heather-icon_medium.jpg?1290984341">
          </li>

          <li>
             <img alt="" src="http://mysite.com/s/files/1/0055/1242/products/afx4000z-gunmetal-heather-icon-1_medium.jpg?1290984341">
          </li>

          <li>
             <img alt="" src="http://mysite.com/s/files/1/0055/1242/products/afx4000z-gunmetal-heather-icon-2_medium.jpg?1290984341">
          </li>

          <li>
             <img alt="" src="http://mysite.com/s/files/1/0055/1242/products/afx4000z-garnet-icon_medium.jpg?1290984341">
          </li>

          <li>
             <img alt="" src="http://mysite.com/s/files/1/0055/1242/products/afx4000z-garnet-icon-1_medium.jpg?1290984341">
          </li>

          <li>
             <img alt="" src="http://mysite.com/s/files/1/0055/1242/products/afx4000z-garnet-icon-2_medium.jpg?1290984341">
          </li>

          <li>
             <img alt="" src="http://mysite.com/s/files/1/0055/1242/products/afx4000z-kelly-green-icon_medium.jpg?1290984341">
          </li>

          <li>
             <img alt="" src="http://mysite.com/s/files/1/0055/1242/products/afx4000z-kelly-green-icon-1_medium.jpg?1290984341">
          </li>

          <li>
             <img alt="" src="http://mysite.com/s/files/1/0055/1242/products/afx4000z-kelly-green-icon-2_medium.jpg?1290984341">
          </li>

        </ul>

然后我需要它用src

更新这个图像

<div class="image">
   <img src="default.jpg"/>
</div>

这是我目前所拥有的，但它不起作用，因为我的客户端不会更改图像的命名约定。任何人都可以建议我解决这个问题吗？

    jQuery(function() {

  jQuery('[name=id]').change(function() {

    var sku = jQuery(this).find(':selected').attr('title');

    // Looking for the preloaded image which src attribute contains the sku.
    var new_src = jQuery('#preload img[src*=' + sku + ']').attr('src');

    // Updating the main image and the href attribute of the anchor element that wraps it.
    jQuery('div.image img').attr('src', new_src);
  });
});

Answer 1

获取每个图像的SRC并使用indexOf方法查看SKU是否出现在图像src中，如果出现，则将其更改为默认值。

jQuery，在选择时更改IMG SRC - 搜索图像

1 个答案: