选择时更改图像，搜索 src 值 jQuery 的列表

Question

任何人都可以看到这段代码有什么问题吗？它只是不工作......

应该清楚我要做什么

 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*="kly"]');

        $('div.image').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>0z-kelly-green-medium.jpg</li>
<li>0z-olive-medium.jpg</li>
</ul>

Answer 1

我认为问题出在这一行：

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

这会将一个元素分配给变量new_src，而不是一个字符串；这意味着当您尝试更改以下行中的 src 时：

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

您实际上是将 dom 节点插入到属性中，这不太可能起作用。

试试：

var new_src = $('#preload img[src*="kly"]').attr('src');

假设$('#preload img[src*="kly"]') 返回一个有效的img 元素，无论如何；从您发布的ul 中我可以看到它包含文本字符串（但这可能是工作中的 Mark-down 编辑器）。

---

已编辑以响应进一步的 cmets。

您有没有想到 no 图像存在于包含字符串 'kly' 的 #preload ul 中？这可能是您遇到的主要问题。我已将列表复制到JS Fiddle, for demo purposes，这个版本似乎可以工作：

$('select').change(
    function(){
        if ($(this).val().toLowerCase() == 'kelly green') {
            var keyword = 'kelly';
        }
        else {
            var keyword = $(this).val().toLowerCase();
        }
        $('#alert').text($('#preload img[src*='+keyword+']').attr('src'))
    });

它当然可以被美化，但它确实有效（至少考虑到我目前所掌握的信息）。