img srcをドロップダウンで変更する

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

}); 

「色」変数が初期化に見えますが、コンソールでそれを確認するとき、それは値を受け取りません。私はコンソールに手動でコードのこの部分をプラグインした場合、画像が変更されます： - しかし、なぜわからない

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

をだから、変数がセットになっていないとの問題のようです。

編集：

ここでは（これは私の最初の試みと同じケースだったcodepenで動作するように表示されますが、Wordpressの中で動作するように失敗した単一のハンドラ、にすべてを持って来られるcodepen

上の私の仕事です）。違いは、Wordpressのページでコンソールを見ると、変数colorは未定義となりますが、それ以前は空の文字列が表示されるという違いがあります。

Answer 1

あなたは同じ変更ハンドラを2回作成していますが、ちょうどそれをすべて入れておけば、これはやると思いますか？

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

});