CSSの画像タグを変更するhtmlのボタン機能？

Question

私の質問では広範にするには、値を読み取ってイメージのソースを変更し、その後別の値を段階的に選択する関数を作成するにはどうすればよいですか？何が最善かは、私に教えるか、あなたが説明するなら、どこかへの言及でしょう...この知識の私の目標の使用はこれを達成することです：

これは必須であり、必須ではありませんが、答えは私の目標であることを念頭に置いておくことができます。 ：D左側には、ユーザが国名で入力するテキストボックスのあるテーブルがあります。ユーザーがボタンをクリックすると、「次のスピーカー」が表示され、テキストボックスが選択され、国名の旗の下にあるテキストボックスの値が変更され、その国の名前が記入されます。その国の国旗が表示されます（フラグがすべて同じ国名に指定されていると仮定します）。

<img src='flags/(Whatever the selected text box says).svg'> 

Answer 1

これはJavascriptでは非常に簡単で、ほんの少しのステップが必要です。 、そして、

var flagImage = document.querySelector('#flagarea > img'); 

同じプロセスを介して入力を選択して、現在選択されている国の名前を取得：まず、それを含むdiv要素のIDを基に画像を選択

var flagSelect = document.querySelector('#flagarea > input'); 
var currentSelection = flagSelect.value; 

そして最後に、 src属性を変更します。

flagImage.src = 'flags/' + currentSelection + '.svg'; 

あなたはjQueryのようにこれをタグ付けが、私はそれは本当に基本的なDOMメソッドを通じてよりjQueryのを介してこれを行うには簡単ですしない主張するだろう。 jQueryのは、あなたが望むものである場合は、ここで同じことを行う方法の例です：

var $flagImage = $('#flagarea > img'); 
var $flagSelect = $('#flagarea > input'); 
var currentSelection = $flagSelect.val(); 
$flagImage.attr('src', 'flags/' + currentSelection + '.svg'); 

あなたはすべてのあなたのイメージは、同じアスペクト比を持っていることを確認したいでしょう、そうでない場合はレイアウトがによって大きく変わる可能性がフラグが選択されています。ただここで.attr()

$('img').attr('src', 'newimagesource.jpg'); 

を使用jQueryを使って画像ソースを変更するには

Answer 2

はドキュメントです：http://api.jquery.com/attr/