jQueryで同じような処理をまとめたい

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
#push00というidのボタンを押したら、#box00というidのdivが表示されるというコードを書いたのですが、
こちらをまとめて記述したいです。

該当のソースコード

  <p>おはようございます</p>
  <button type="button" id="push01" class="btn"/>
    次へ
  </button>
  </div>
  <div id="box01">
    <p>こんにちは</p>
    <button type="button" id="push02" class="btn"/>
      次へ
    </button>
  </div>
  <div id="box02">
    <p>こんばんは</p>
  </div>

  $(function(){
    $("#box01").css("display", "none");
    $("#push01").one("click", function () {
      $("#box01").toggle();
    });
    $("#box02").css("display", "none");
    $("#push02").one("click", function () {
      $("#box02").toggle();
    });
  });

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

htmlもご提示ください

[tkhs0827]

ありがとうございます。htmlも記述しました。

Answer 1

必ずリンクしているというルールなのであればdata属性などを利用してリンクさせるのもありです。
あとは同じ処理をしているエレメントには同じclassを与えてthisで対応。

  <p>おはようございます</p>
  <button type="button" id="push01" class="btn" data-box-target="box01" >
    次へ
  </button>
  <div id="box01" class="box">
    <p>こんにちは</p>
    <button type="button" id="push02" class="btn" data-box-target="box02" >
      次へ
    </button>
  </div>
  <div id="box02" class="box">
    <p>こんばんは</p>
  </div>

$(function(){
    $(".box").hide();
    $(".btn").one("click", function () {
      $("#"+$(this).data("box-target")).toggle();
    });
  });

• thisについて
• HTML5 カスタムデータ属性「data-*」にJavaScript、jQueryからアクセスする方法

追記：
そういえば幾つかhtmlがおかしい部分がありますので修正しました。
開始のdivがないのに</div>で閉じている。→ 開始が分からないので閉じdivを削除
<button /></button>としてしまっている。→ <button></button> に修正

Comments

[tkhs0827]

何から何までありがとうござます！
わかりやすく教えていただきありがとうございます！
無事に出来ました！

[m.ts10806]

htmlはきちんと構文守ってくださいね。
そこがおかしいとjavascript側も正常に解釈できないので。
Bracketsなど構文チェックも同時にしてくれるエディタをご活用ください。

Answer 2

やりたいことを見直してみましょう。やりたいのは、
ボタンが押されたら、そのボタンの ID の番号と紐付く div が表示され、他の div は表示されない
ですよね。
そういう動きをするボタンと div が複数あるなら、それらに対して「クラス」を定義してやって、そのクラスを selector で扱った方が効率が断然よくなります。

まず、ボタンと div それぞれにクラスを定義します。

<input type="button" class="showdiv" id="push01">01</input>
<input type="button" class="showdiv" id="push02">02</input>

<div class="showdiv" id="box01">...</div>
<div class="showdiv" id="box02">...</div>

そうすると、ボタンのイベントハンドラはこう書けます。

$("input.showdiv").on('click', function(
  $('div.showdiv').css('display', 'none');
  $("#box"+$(this).id.substr(-2)).toggle();
));

Comments

[m.ts10806]

回答のコード作ってて思ったのですが、質問者さんはone()を利用されているので1回開いたら閉じない仕様にしてるんじゃないかなあと思ったり。
としたらjsじゃなくてstyleでnoneにしてtoggle()じゃなくてshow()にした方が良さそうです。要件にもよりますね。。