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

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中，如果出现则将其更改为默认值。