Question

在下拉列表中选择各种选项时尝试更新图像（在Wordpress中）。

jQuery( window ).ready(function() {

var color;

jQuery("#pa_colour").change(function() {
  color = jQuery(this).val();
}).change();

jQuery(document).on('change', 'select', function() {

if(color=='red') {
    document.getElementById('Image').src = "http://example.com/wp-content/uploads/red.jpg";
} else if(color=="green") {
    document.getElementById('Image').src = "http://example.com/wp-content/uploads/green.jpg";
} 
  });

});

'color'变量似乎已初始化，但在控制台中检查时，它不会收到值。如果我将这段代码手动插入控制台，图像将会改变：

jQuery("#pa_colour").change(function() {
  color = jQuery(this).val();
}).change();

所以似乎这个变量没有设定也是一个问题 - 虽然不确定原因。

修改

这是我在codepen

上的工作

将所有内容整合到一个处理程序中，它似乎在codepen中工作但无法在Wordpress中工作（这与我最初的尝试情况相同）。现在的区别是，当在Wordpress页面上查看控制台时，color变量显示为未定义，而在显示空字符串之前。

Answer 1

你是两次创建相同的变更处理程序，只是完全放了，我想这会做到吗？

jQuery( window ).ready(function() {

var color;

jQuery("#pa_colour").on('change', 'select', function() {

  color = jQuery(this).val();

  if(color=='red') {
    document.getElementById('Image').src = "http://example.com/wp-content/uploads/red.jpg";
} else if(color=="green") {
    document.getElementById('Image').src = "http://example.com/wp-content/uploads/green.jpg";
} 
  });

});

用下拉列表更改img src

1 个答案: