jQuery 查找值然后替换 SRC

任何人都可以看到这段代码有什么问题，它只是不起作用......

我在尝试着：

获取#product-variants-option-0 的值

搜索 #preload 相关图像并

然后将 div.image img src 更改为该图像

jQuery(document).ready(function($) {
   $('#product-variants-option-0').change(function() {

     // What is the sku of the current variant selection.
     var select_value = $(this).find(':selected').val();

            if (select_value == "Kelly Green") {
             var keyword = "kly";
            };

        var new_src = $('#preload img[src*=keyword]');

        $('div.image img').attr('src', new_src);

   });
 });

选择：

<select class="single-option-selector-0" id="product-variants-option-0">
<option value="Kelly Green">Kelly Green</option>
<option value="Navy">Navy</option>
<option value="Olive">Olive</option>
<option value="Cocoa">Cocoa</option>
</select>

我正在尝试搜索无序列表：

<ul id="preload" style="display:none;">
<li><img src="0z-kelly-green-medium.jpg"/></li>
<li><img src="0z-olive-medium.jpg"/></li>
</ul>

我试图替换的图像是这样的：

我看到一些问题：

1. 您没有将“Kelly Green”转换为“kelly”。
2. The var new_src = $('#preload img[src*=keyword]'); has keyword硬编码到其中（不是关键字变量的值）。
3. The lis in the list don't have img elements inside them (they just directly contain the URL as text). You've edited the question and fixed that.
4. 如果选择的值不是“Kelly Green”，则不会将其设为小写，并且根本不会使用该值。
5. 你没有检索到src预加载图像的属性。

If you change the list to:

<ul id="preload" style="display:none;">
<li><img src='0z-kelly-green-medium.jpg'></li>
<li><img src='0z-olive-medium.jpg'></li>
</ul>