Q&A
コードはマークダウンのcode機能を利用してご提示ください。
また、ご自身が試したコードをご提示ください。
いつもお世話になっております。
前提・実現したいこと
例えば以下のjQueryのコードがありこれをfor文で簡潔に記述したく思っております。
どのような記述が効率がよいのかわかりませのでご教授いただければ幸いです。
よろしくお願いいたします。
html
1<body> 2 <div class="js-btn1">btn1</div> 3 <div class="js-child1">panel1</div> 4 5 <div class="js-btn2">btn2</div> 6 <div class="js-child2">panel2</div> 7 8 <div class="js-btn3">btn3</div> 9 <div class="js-child3">pane3</div> 10 11 <div class="js-btn4">btn4</div> 12 <div class="js-child4">panel4</div> 13 14</body>
該当のソースコード
$(document).ready(function(){ $('.js-btn1').click(function(){ $(this).next('.js-child1').slideToggle('fast'); }) $('.js-btn2').click(function(){ $(this).next('.js-child2').slideToggle('fast'); }) $('.js-btn3').click(function(){ $(this).next('.js-child3').slideToggle('fast'); }) $('.js-btn4').click(function(){ $(this).next('.js-child4').slideToggle('fast'); }) });
こちらで試してみたコードは以下になります。
$(document).ready(function(){ for (var i = 0; i < 5; i++) { $('.js-btn'+i).click(function(){ $(this).next('.js-child'+i).slideToggle('fast'); }); } });
$('.js-btn'+i)や('.js-child'+i)などは正しい記述になりますでしょうか。
初歩的なご質問になり恐縮ですが、よろしくお願い申し上げます。
ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
提示のコードで何か問題が出ているのでしょうか？
想定通り動くか別として、0始まりであること以外はforとしては無駄がないように思いますが。
JavaScriptとはいっても基本はhtmlあってのものなので、これ以上となるとhtmlも提示いただかないと難しいのでは。html修正可能かどうかも含めて追記してください
ご教授ありがとうございます。
それぞれ個別にtoggleを指定したコードでは意図した動きになるのですが、
for文を利用したコードではpanelが動かず意図した動きになりませんでした。
$('.js-btn'+i)や('.js-child'+i)の記述がまちがっているような見解（quotationが囲む必要がある）なのですが、どのような記述であれば解決するのか知りたくお願いいたします。
ちなみにceftweb様に回答いただいた方法が一番わかりやすく簡潔なことは理解しましたが
for文を使っての記述方法をご教示いただけますと幸いです。
勉強中の身で初歩的なことかもしれませんがどうぞよろしくお願いいたします。
それはつまりfor文の練習がしたいという理解でよろしいでしょうか。
(それならあえてイベント絡ませなくてもいいような)
回答4件
0
ボタンとスライド表示・非表示させる要素との位置関係がすべて同じなのであれば、わざわざクラス名に番号を振らなくとも以下のコードのみで大丈夫なのではないでしょうか。
jQuery
1$(function(){ 2 $('.js-btn').on('click', function(){ 3 $(this).next('.js-child').slideToggle('fast'); 4 }); 5});
htmlのマークアップももちろんクラス名には番号を振らず、すべてjs-btnやjs-childといった同じものにします。
それから、提示されたコードは.click();の);部分を書き忘れていますよ。
あと、jQueryのどのバージョンをお使いかわかりませんが、もし3なら$(document).ready()ではなく$()が推奨されていますので、ご参考までに。
投稿2019/03/14 21:19
総合スコア1907
0
数字を取るか、共通の新しいクラス名などをつけてから配列に格納してからクリックイベントをつける感じでどうでしょうか？これならいくらinput増えても楽ですよ。
javascript
1$(document).ready(function(){ 2 var js_btn =$('.js-btn') 3 for (var i = 0; i < js_btn.length; i++) { 4 js_btn[i].click(function(){ 5 $(this).next().slideToggle('fast'); 6 }); 7 } 8});
投稿2019/03/15 04:28
編集2019/03/18 00:16
総合スコア197
$(js_btn[i]).next が毎回見つからないと思いますよ。クリックされる時点に「 i 」は js_btn.length になりませんか。
ごしてきありがとうございますっ。thisにしゅうせいしましたっ
0
別解
javascript
1<script> 2$(function(){ 3 $(':button').on('click',function(){ 4 var reg=/^js-btn([1-4])$/; /* ← ここ条件 1～4*/ 5 if((l=[].filter.call($(this).prop('classList'),function(x){ 6 return x.match(reg); 7 }).map(function(x){ 8 return x.match(reg)[1]; 9 })).length>0){ 10 $(this).next(l.map(function(x){ 11 return '.js-child'+x; 12 }).join(",")).slideToggle('fast'); 13 } 14 }); 15}); 16</script> 17 18<input type="button" value="1" class="hoge js-btn1 fuga"><span class="js-child1">hoge1</span><br> 19<input type="button" value="2" class="hoge js-btn2 fuga"><span class="js-child2">hoge2</span><br> 20<input type="button" value="3" class="hoge js-btn3 fuga"><span class="js-child3">hoge3</span><br> 21<input type="button" value="4" class="hoge js-btn4 fuga"><span class="js-child4">hoge4</span><br> 22<hr> 23<input type="button" value="5" class="hoge js-btn5 fuga"><span class="js-child5">hoge5(うごかない) btn=5が範囲外</span><br> 24<input type="button" value="1" class="hoge js-btn1 fuga"><span class="js-child2">hoge2(うごかない) btn=1でchild=2</span><br> 25<hr> 26<input type="button" value="1,2" class="hoge js-btn1 js-btn2 fuga"><span class="js-child1">hoge1</span><br> 27<input type="button" value="1,2" class="hoge js-btn1 js-btn2 fuga"><span class="js-child2">hoge2</span><br> 28 29
投稿2019/03/15 03:23
編集2019/03/15 03:30
総合スコア116683
0
ベストアンサー
ちなみにceftweb様に回答いただいた方法が一番わかりやすく簡潔なことは理解しましたが
for文を使っての記述方法をご教示いただけますと幸いです。
js
1$(document).ready(function(){ 2//for (var i = 0; i < 5; i++) { 3// ↓ 4 for (let i = 0; i < 5; i++) { 5 $('.js-btn'+i).click(function(){ 6 // 上記変更する前にここでiの値を確認してみて 7 $(this).next('.js-child'+i).slideToggle('fast'); 8 }); 9 } 10});
追記：
js
1$(document).ready(function(){ 2 for (var i = 0; i < 5; i++) { 3 //(function(){//修正前 4 (function(i){ 5 $('.js-btn'+i).click(function(){ 6 // 上記変更する前にここでiの値を確認してみて 7 $(this).next('.js-child'+i).slideToggle('fast'); 8 }); 9 })(i); // 即時関数 10 } 11});
投稿2019/03/15 02:27
編集2019/03/15 06:49総合スコア69596
ご教示ありがとうございます。
単体でletを利用した場合意図した結果になりました。
しかしこちらの案件はgulp-uglify（gulp）を利用しておりletを使うとエラーになってしまします。
（gulp-uglify は ES2015 以降対応してなかった）
Error: Unexpected token name «i», expected punc «;»
varを利用してfor文でまとめることは可能なのでしょうか？
letに対応していないブラウザに対応する必要性を全く感じませんが、後で追記します。
ご回答ありがとうございます。
追記いただいた即時関数のコードではパネルの表示非表示が行われなくなってしまいました。
当方のなにかの勘違いでしょうか？
申し訳ございませんよろしくお願いいたします。
あ、ちょいミスしていたので修正します。
こちらにて意図した動きが実現できました。
let、varの違い、即時関数など理解できていないことがありますので、
調べながら理解を深めようと思います。
ご教示いただきましてありがとうございます。
あなたの回答
tips
プレビュー
