jQuery, поменяйте IMG SRC на выделение - поиск картинки - PullRequest
Новая
       7

jQuery, поменяйте IMG SRC на выделение - поиск картинки

0 голосов
/ 22 декабря 2010

Я задал вопрос некоторое время назад и понял, что сделал несколько ошибок, я переосмыслил их так, как я это делаю, и подумал, что снова сделаю чистый вопрос.

У меня есть список выбора, 

<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);
  });
});

1 Ответ

0 голосов
/ 22 декабря 2010

Получите SRC каждого изображения и используйте метод indexOf, чтобы увидеть, появляется ли SKU на изображении src, если это так, измените его на значение по умолчанию.

...