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

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

ただいまの
回答率

90.51%

  • jQuery

    7742questions

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

for文で簡潔に記述したい

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 243

mkefe

score 1

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

前提・実現したいこと

例えば以下のjQueryのコードがありこれをfor文で簡潔に記述したく思っております。
どのような記述が効率がよいのかわかりませのでご教授いただければ幸いです。

よろしくお願いいたします。

<body>
  <div class="js-btn1">btn1</div>
  <div class="js-child1">panel1</div>

  <div class="js-btn2">btn2</div>
  <div class="js-child2">panel2</div>

  <div class="js-btn3">btn3</div>
  <div class="js-child3">pane3</div>

  <div class="js-btn4">btn4</div>
  <div class="js-child4">panel4</div>

</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)などは正しい記述になりますでしょうか。

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2019/03/15 06:21

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

    キャンセル

  • mkefe

    2019/03/15 11:23

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

    勉強中の身で初歩的なことかもしれませんがどうぞよろしくお願いいたします。

    キャンセル

  • mts10806

    2019/03/15 11:25

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

    キャンセル

回答 4

+3

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

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


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

別解

<script>
$(function(){
  $(':button').on('click',function(){
    var reg=/^js-btn([1-4])$/; /* ← ここ条件 1~4*/
    if((l=[].filter.call($(this).prop('classList'),function(x){
      return x.match(reg);
    }).map(function(x){
      return x.match(reg)[1];
    })).length>0){
      $(this).next(l.map(function(x){
        return '.js-child'+x;
      }).join(",")).slideToggle('fast');
    }
  });
});
</script>

<input type="button" value="1" class="hoge js-btn1 fuga"><span class="js-child1">hoge1</span><br>
<input type="button" value="2" class="hoge js-btn2 fuga"><span class="js-child2">hoge2</span><br>
<input type="button" value="3" class="hoge js-btn3 fuga"><span class="js-child3">hoge3</span><br>
<input type="button" value="4" class="hoge js-btn4 fuga"><span class="js-child4">hoge4</span><br>
<hr>
<input type="button" value="5" class="hoge js-btn5 fuga"><span class="js-child5">hoge5(うごかない) btn=5が範囲外</span><br>
<input type="button" value="1" class="hoge js-btn1 fuga"><span class="js-child2">hoge2(うごかない) btn=1でchild=2</span><br>
<hr>
<input type="button" value="1,2" class="hoge js-btn1 js-btn2 fuga"><span class="js-child1">hoge1</span><br>
<input type="button" value="1,2" class="hoge js-btn1 js-btn2 fuga"><span class="js-child2">hoge2</span><br>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

数字を取るか、共通の新しいクラス名などをつけてから配列に格納してからクリックイベントをつける感じでどうでしょうか?これならいくらinput増えても楽ですよ。

$(document).ready(function(){  
 var js_btn =$('.js-btn')
 for (var i = 0; i < js_btn.length; i++) {  
    js_btn[i].click(function(){
      $(this).next().slideToggle('fast');
    });
  }
});

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/15 15:56

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

    キャンセル

  • 2019/03/17 22:46

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

    キャンセル

checkベストアンサー

0

ちなみにceftweb様に回答いただいた方法が一番わかりやすく簡潔なことは理解しましたが
for文を使っての記述方法をご教示いただけますと幸いです。

$(document).ready(function(){
//for (var i = 0; i < 5; i++) {
//      ↓
  for (let i = 0; i < 5; i++) {
    $('.js-btn'+i).click(function(){
      // 上記変更する前にここでiの値を確認してみて
      $(this).next('.js-child'+i).slideToggle('fast');
    });
  }
});

追記:

$(document).ready(function(){
  for (var i = 0; i < 5; i++) {
  //(function(){//修正前
    (function(i){
      $('.js-btn'+i).click(function(){
        // 上記変更する前にここでiの値を確認してみて
        $(this).next('.js-child'+i).slideToggle('fast');
      });
    })(i); // 即時関数
  }
});

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/15 12:36

    ご教示ありがとうございます。
    単体でletを利用した場合意図した結果になりました。

    しかしこちらの案件はgulp-uglify(gulp)を利用しておりletを使うとエラーになってしまします。
    (gulp-uglify は ES2015 以降対応してなかった)
    Error: Unexpected token name «i», expected punc «;»

    varを利用してfor文でまとめることは可能なのでしょうか?

    キャンセル

  • 2019/03/15 12:45

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

    キャンセル

  • 2019/03/15 13:19

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

    キャンセル

  • 2019/03/15 15:48

    あ、ちょいミスしていたので修正します。

    キャンセル

  • 2019/03/15 16:15

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

    ご教示いただきましてありがとうございます。

    キャンセル

同じタグがついた質問を見る

  • jQuery

    7742questions

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