クリックした画像を表示させるJavaScriptがうまく動かない【イメージ画像あり】

JavaScriptがうまく動きません。
HTML/CSSはこちらで質問させていただいたものです。

やりたいこと

](f08bdcfc45901985d2695a47451e1030.jpeg)

id=menuList内の画像をクリックすると、

id=menuNameとid=clickMenuの画像を入れ変える。

入れ替える画像は、クリックする画像によって出し分けたい。

id=menuList 1.png をクリックしたとき
→id=menuNameはmenu_01.png、id=clickNameはmenu1.jpg

id=menuList 2.png をクリックしたとき
→id=menuNameはmenu_02.png、id=clickNameはmenu2.jpg

id=menuList 3.png をクリックしたとき
→id=menuNameはmenu_03.png、id=clickNameはmenu3.jpg

現画像を１秒かけてフェードアウト、入れ替え画像を１秒かけてフェードインさせる。

困っていること

なぜかどの画像をクリックしても、
id=clickNameにはmenu1.jpgしか表示されない。
id=menuNameは変化しない。

function内の条件分岐の書き方がおかしいのではと思っているのですが、
原因をご教授いただきたいです。
よろしくお願いします。

HTML
1  <ul id="menuList">
2　　　　<li><img src="1.png" class="cro"/></li>
3　　　　<li><img src="2.png" class="fra"/></li>
4　　　　<li><img src="3.png" class="cur"/></li>
5  </ul>
6  <p id="menuName"><img src="01.png" /></p>
7  <p id="clickMenu"><img src="menu1.jpg" /></p>

JavaScript
1<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
2<script>
3$(function() {
4  $('#menuList .cro').click(function(e) {
5    $('#clickMenu').fadeOut(1000, function() {
6      $('#clickMenu').attr('src', 'menu1.jpg').fadeIn(1000);
7    });
8	$('#clickMenu').fadeOut(1000, function() {
9      $('#menuName').attr('src','menu_01.png').fadeIn(1000);
10    });
11  });
12});
13$(function() {
14  $('#menuList .fra').click(function(e) {
15    $('#clickMenu').fadeOut(1000, function() {
16      $('#clickMenu').attr('src', 'menu2.jpg').fadeIn(1000);
17    });
18	$('#clickMenu').fadeOut(1000, function() {
19      $('#menuName').attr('src', 'menu_02.png').fadeIn(1000);
20    });
21  });
22});
23$(function() {
24  $('#menuList .cur').click(function(e) {
25    $('#clickMenu').fadeOut(1000, function() {
26      $('#clickMenu').attr('src', 'menu3.jpg').fadeIn(1000);
27    });
28	$('#clickMenu').fadeOut(1000, function() {
29      $('#menuName').attr('src', 'popyepan_menu_03.png').fadeIn(1000);
30    });
31  });
32})
33</script>

行動規範の内容に同意します

回答3件

ベストアンサー

$('#menuName')ではp要素である#menuNameが対象になっているためです。

HTML
1<p id="menuName"><img src="01.png" /></p>

これをjQueryで取得する場合は以下のようにして#menuNameの子要素imgを取得します。

Javascript
1$('#menuName').children("img")

投稿2018/07/13 18:05

退会済みユーザー

総合スコア0

harebareyukai

2018/07/17 05:04

回答ありがとうございます。 https://teratail.com/questions/136001#reply-206666 こちらで修正してみましたが、うまく動きません・・・。

退会済みユーザー

2018/07/17 10:02

#clickMenu>imgの画像は変更されましたか？#menuNameが子要素指定されていませんがそれとは別の問題ですか？

harebareyukai

2018/08/05 10:12

子要素指定するとうまく動作しました！有難うございます！！

行動規範の内容に同意します

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8"/>
5    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
6    <style>
7      *{
8        margin: 0;
9        padding: 0;
10      }
11      #menuPage{
12        margin: 0 auto;
13        width: 80%;
14        display: flex;
15        flex-direction: column;
16      }
17      #menuList{
18        display: flex;
19        justify-content: center;
20        list-style: none;
21      }
22      #menuList li{
23        margin: 0 3px;
24      }
25      #menuName{
26        margin: 0 auto;
27      }
28      #clickMenu{
29        margin: 0 auto;
30      }
31    </style>
32    <script>
33      function menuAL(menu_num){
34        const $mn_elem = $("#menuName");
35        const $cm_elem = $("#clickMenu");
36        $mn_elem.fadeOut(1000, function(){
37          $mn_elem.attr("src", "mn" + menu_num + ".png");
38          $mn_elem.fadeIn();
39        });
40        $cm_elem.fadeOut(1000, function(){
41          $cm_elem.attr("src", "cm" + menu_num + ".png"),
42          $cm_elem.fadeIn()
43        });
44      }
45    </script>
46  </head>
47  <body>
48    <div id="menuPage">
49      <ul id="menuList">
50        <li><img onclick="menuAL(1)" src="ml1.png" /></li>
51        <li><img onclick="menuAL(2)" src="ml2.png" /></li>
52        <li><img onclick="menuAL(3)" src="ml3.png" /></li>
53      </ul>
54      <img id="menuName" src="mn1.png">
55      <img id="clickMenu" src="cm1.png">
56    </div>
57  </body>
58</html>

みなさんの意見をシンプルにしてみました。
「menuList」の画像3枚、ml1,ml2,ml3。「menuName」の画像3枚、mn1,mn2,mn3。「clickMenu」の画像3枚、cm1,cm2,cm3。
それぞれ画像の名前を変更してテストで動かしてみて下さい。
画像を用意するだけでコピペで動くように前回のスタイルシートも付属してあります。

短いコードなので1行ずつ何をしているのか調べていくと改造するのは簡単かと思います。

メニューが増えてもimgタグ内のonclick="menuAL()"の数字を増やすだけなので考え安いかなと思いましたがどうでしょう？？
画像の名前を変更したくない場合は、配列を利用すると良いでしょう|ーﾟ)

投稿2018/07/17 14:49

退会済みユーザー

総合スコア0

TnTechさんの回答を参考に修正してみましたが、
やはり画像の切り替えがうまく動きませんでした・・・。

JavaScript
1$(function() {
2  $('#menuList .cro').click(function(e) {
3    $('#clickMenu').children("img").fadeOut(1000, function() {
4      $('#clickMenu').children("img").attr('src', 'menu1.jpg').fadeIn(1000);
5    });
6    $('#menuNameu').children("img").fadeOut(1000, function() {
7      $('#menuName').attr('src','menu_01.png').fadeIn(1000);
8    });
9  });
10})
11$(function() {
12  $('#menuList .fra').click(function(e) {
13    $('#clickMenu').children("img").fadeOut(1000, function() {
14      $('#clickMenu').children("img").attr('src', 'menu2.jpg').fadeIn(1000);
15    });
16    $('#menuNameu').children("img").fadeOut(1000, function() {
17      $('#menuName').attr('src','menu_02.png').fadeIn(1000);
18    });
19  });
20});
21$(function() {
22  $('#menuList .cur').click(function(e) {
23    $('#clickMenu').children("img").fadeOut(1000, function() {
24      $('#clickMenu').children("img").attr('src', 'menu3.jpg').fadeIn(1000);
25    });
26    $('#menuNameu').children("img").fadeOut(1000, function() {
27      $('#menuName').attr('src','menu_03.png').fadeIn(1000);
28    });
29  });
30});
31</script>