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

任何人都可以看到这个代码有什么问题它只是不工作…

应该清楚我想要做什么

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

选择：

  Kelly Green Navy Olive Cocoa  

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

 
 
0z-kelly-green-medium.jpg
 
0z-olive-medium.jpg
  

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编辑器）。

---

编辑以回应进一步的评论。

您是否发现#preload ul中包含字符串’kly’的图像不存在？ 这可能是你遇到的主要问题。 我已将列表复制到JS Fiddle，用于演示目的 ，此版本似乎有效：

 $('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')) }); 

它当然可以被美化，但它确实有效（至少根据我迄今为止得到的信息）。