46635


はじめまして！  
HTML、Javascript、jQueryの初心者です。  
以下のプログラムで、  
最初にimage/1.jpgが表示され  
マウスをクリックすると  
image/2-1.jpgが表示されるようにしたいのですが  
最初の画面から変わりません…

３時間ほどサイトを見てあれこれ試したのですがだめでした。。  
どうぞよろしくお願いいたします。

[code]

    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        </style>
        <meta name="description" content=""/>
        <link rel="stylesheet" href="css/style.css">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    
    </head>
    
    <body>
        <!--ボタンの画像表示-->
        <p class="button">
        <img style="width: 100%;" src="image/1.jpg" alt="ボタン"  >
        </p>
    
        <pp class="note">
        <img style="width: 100%;" src="image/2-1.jpg" alt="ノート" >
        </pp>
    
        <!--ボタンを押したら選択画面-->
        <script type="text/javascript">
            $(function()
            {
                $('p').click(function(){
                    $('pp').show();
                });
            });  
        </script>
    
    </body>
    </html>
    
[/code]


CC BY-SA 4.0
2018-07-15T11:26:30.273
46634
2018-07-15T13:20:26.470
2018-07-15T13:20:26.470
29323
question
javascript html jquery
jQueryで画像の表示・非表示を切り替える方法について


> 最初に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のみで対応するのであれば、以下の実装はいかがでしょうか。

[code]

    $(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();
      });
    });
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <!--ボタンの画像表示-->
    <p class="button">
      <img style="width: 100%;" src="http://placehold.it/600x100/333/ffffff&text=image/1.jpg" alt="ボタン"  >
    </p>
    
    <p class="note">
      <img style="width: 100%;" src="http://placehold.it/600x100/006600/ffffff&text=image/2-1.jpg" alt="ノート" >
    </p>
[/code]


CC BY-SA 4.0
2018-07-15T12:07:09.113
46635
2018-07-15T13:13:01.707
2018-07-15T13:13:01.707
46634
answer