質問: はじめまして! HTML、Javascript、jQueryの初心者です。 以下のプログラムで、 最初にimage/1.jpgが表示され マウスをクリックすると image/2-1.jpgが表示されるようにしたいのですが 最初の画面から変わりません... 3時間ほどサイトを見てあれこれ試したのですがだめでした。。 どうぞよろしくお願いいたします。 ``` ```
回答: > > 最初にimage/1.jpgが表示され > > マウスをクリックすると > > image/2-1.jpgが表示されるようにしたいのですが > > > 上記を以下のように解釈しました。 1. 画面初回表示時、`image/1.jpg`は表示、`image/2-1.jpg`は非表示 2. `image/1.jpg`をクリック時、`image/1.jpg`は非表示、`image/2-1.jpg`は表示 3. `image/2-1.jpg`をクリック時、`image/1.jpg`は表示、`image/2-1.jpg`は非表示 jqueryのみで対応するのであれば、以下の実装はいかがでしょうか。 ``` $(function() { // 画面初回表示時 $('p.note').hide(); // image/1.jpgをクリック時の処理 $('p.button').click(function(){ // 'p.note'を表示 $('p.note').show(); // 'p.button'を非表示 $(this).hide(); }); // image/2-1.jpgをクリック時の処理 $('p.note').click(function() { // 'p.button'を表示 $('p.button').show(); // 'p.note'を非表示 $(this).hide(); }); }); ``` ``` ```