「あああ」をクリックしたら、詳細エリアが表示されて、
詳細エリア内の
「かかか」をクリックしたら「あああ」の箇所が「かかか」に変更
「さささ」をクリックしたら「あああ」の箇所が「さささ」に変更
というような動きをしたいのですが、
「かかか」、「さささ」~をクリックすると以下のようなエラーが表示されて、テキストが変更されません。
以下のjs箇所を削除すればエラーがでませんでした。
js
1$('.area').on('click', function () { 2 var buttonText = $(this).text; 3 $('.button01').text(buttonText); 4});
調べたのですが良くわからず。どこが間違っているのでしょうか?
教えていただけると幸いです。
以下がソースになります。
html
1<div class="mainWrap"> 2 <button id="button" class="button01">あああ</button> 3 <div class="subButtonWrap"> 4 <ul class="subButtonArea"> 5 <li class="area">かかか</li> 6 <li class="area">さささ</li> 7 <li class="area">たたた</li> 8 <li class="area">ななな</li> 9 <li class="area">ははは</li> 10 </ul> 11 </div> 12</div>
css
1.mainWrap { 2 text-align: center; 3 padding: 30px 5px; 4 line-height: 18px; 5} 6button { 7 padding: 10px 20px; 8 border: 1px solid #000; 9 border-radius: 5px; 10} 11.subButtonWrap { 12 display: none; 13 margin: 15px 0 0; 14} 15.subButtonWrap .subButtonArea { 16 width: 300px; 17 margin: 0 auto; 18 padding: 20px; 19 border: 1px solid #000; 20 border-radius: 5px; 21} 22.subButtonWrap .subButtonArea > li { 23 display: inline-block; 24 width: 100px; 25 margin: 0 10px 10px; 26 padding: 10px; 27 border: 1px solid #000; 28 border-radius: 5px; 29 list-style: none; 30}
js
1$(function () { 2 $('#button').on('click', function () { 3 $('.subButtonWrap').fadeToggle(500); 4 }); 5 6 $('.area').on('click', function () { 7 var buttonText = $(this).text; 8 $('.button01').text(buttonText); 9 }); 10});
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/25 13:02