質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

4回答

995閲覧

for文で簡潔に記述したい

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1グッド

1クリップ

投稿2019/03/14 13:09

編集2019/03/15 04:34

いつもお世話になっております。

前提・実現したいこと

例えば以下の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)などは正しい記述になりますでしょうか。

初歩的なご質問になり恐縮ですが、よろしくお願い申し上げます。

oppeke👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/03/14 13:26

コードはマークダウンのcode機能を利用してご提示ください。 また、ご自身が試したコードをご提示ください。
kei344

2019/03/14 16:12

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
m.ts10806

2019/03/14 21:21

提示のコードで何か問題が出ているのでしょうか? 想定通り動くか別として、0始まりであること以外はforとしては無駄がないように思いますが。 JavaScriptとはいっても基本はhtmlあってのものなので、これ以上となるとhtmlも提示いただかないと難しいのでは。html修正可能かどうかも含めて追記してください
退会済みユーザー

退会済みユーザー

2019/03/15 02:23

ご教授ありがとうございます。 それぞれ個別にtoggleを指定したコードでは意図した動きになるのですが、 for文を利用したコードではpanelが動かず意図した動きになりませんでした。 $('.js-btn'+i)や('.js-child'+i)の記述がまちがっているような見解(quotationが囲む必要がある)なのですが、どのような記述であれば解決するのか知りたくお願いいたします。 ちなみにceftweb様に回答いただいた方法が一番わかりやすく簡潔なことは理解しましたが for文を使っての記述方法をご教示いただけますと幸いです。 勉強中の身で初歩的なことかもしれませんがどうぞよろしくお願いいたします。
m.ts10806

2019/03/15 02:25

それはつまりfor文の練習がしたいという理解でよろしいでしょうか。 (それならあえてイベント絡ませなくてもいいような)
guest

回答4

0

ボタンとスライド表示・非表示させる要素との位置関係がすべて同じなのであれば、わざわざクラス名に番号を振らなくとも以下のコードのみで大丈夫なのではないでしょうか。

jQuery

1$(function(){ 2 $('.js-btn').on('click', function(){ 3 $(this).next('.js-child').slideToggle('fast'); 4 }); 5});

htmlのマークアップももちろんクラス名には番号を振らず、すべてjs-btnjs-childといった同じものにします。
それから、提示されたコードは.click(););部分を書き忘れていますよ。
あと、jQueryのどのバージョンをお使いかわかりませんが、もし3なら$(document).ready()ではなく$()が推奨されていますので、ご参考までに。

投稿2019/03/14 21:19

cerfweb

総合スコア1899

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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
shuzi

総合スコア197

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2019/03/15 06:56

$(js_btn[i]).next が毎回見つからないと思いますよ。クリックされる時点に「 i 」は js_btn.length になりませんか。
shuzi

2019/03/17 13:46

ごしてきありがとうございますっ。thisにしゅうせいしましたっ
guest

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
yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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
kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/03/15 03:36

ご教示ありがとうございます。 単体でletを利用した場合意図した結果になりました。 しかしこちらの案件はgulp-uglify(gulp)を利用しておりletを使うとエラーになってしまします。 (gulp-uglify は ES2015 以降対応してなかった) Error: Unexpected token name «i», expected punc «;» varを利用してfor文でまとめることは可能なのでしょうか?
kei344

2019/03/15 03:45

letに対応していないブラウザに対応する必要性を全く感じませんが、後で追記します。
退会済みユーザー

退会済みユーザー

2019/03/15 04:19

ご回答ありがとうございます。 追記いただいた即時関数のコードではパネルの表示非表示が行われなくなってしまいました。 当方のなにかの勘違いでしょうか? 申し訳ございませんよろしくお願いいたします。
kei344

2019/03/15 06:48

あ、ちょいミスしていたので修正します。
退会済みユーザー

退会済みユーザー

2019/03/15 07:15

こちらにて意図した動きが実現できました。 let、varの違い、即時関数など理解できていないことがありますので、 調べながら理解を深めようと思います。 ご教示いただきましてありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問