jqueryで同じ処理のコードをまとめたいです。jQuery初心者です。

Question

###前提・実現したいこと
数字が異なるクラスを使用しているだけで同じ処理をしたいと思っています。
この処理をまとめることは可能でしょうか？
よろしくお願いいたします。

###該当のソースコード

<div class="button_plan_01">button</div>
<div class="cnt_plan_01">contents</div>
<div class="button_plan_02">button</div>
<div class="cnt_plan_02">contents</div>

  <script>
    $(".button_plan_01").click(
      function () {
        $(".cnt_plan_01").slideToggle();
      }
    );
    $(".button_plan_02").click(
      function () {
        $(".cnt_plan_02").slideToggle();
      }
    );
  </script>

Comments

[kei344]

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[m.ts10806]

htmlのご提示は可能でしょうか。

[hiroakitajima]

ご指摘ありがとうございます。ご指摘いただきた部分を修正いたしました。引き続きよろしく願いいたします。

Answer 1

まず、「トグル動作させるというふるまい」をさせるjs_run_toggleというclassを割り当てます。
そして、動作対象の指定の方法には「カスタムデータ属性」を利用しました。
(詳しくはカスタムデータ属性で検索してください。)

動作サンプル（ボタンを押すと、動作対象のクラス名を表示するだけです）
https://jsfiddle.net/xhdnfemc/

<button class="button_plan_01 js_run_toggle" data-target_class="cnt_plan_01">ボタン１</button>
<button class="button_plan_02 js_run_toggle" data-target_class="cnt_plan_02">ボタン２</button>

$(function(){
  $(".js_run_toggle").click(function () {
  		var targetClassName = '.' + $(this).data('target_class');
      // $(targetClassName).slideToggle();
      alert(targetClassName);
  });
});

Comments

[rkojima]

button_plan_01/ button_plan_02 を残しているのは、cssで利用することがあるかもしれなかったからです。（ボタン1は緑、ボタン2は青・・・など）
個別にデザインを変更することがないのであれば、取ってしまったほうがいいです。

[hiroakitajima]

まさに理想のコードです。
カスタムデータ属性を使用してこのような処理ができることに大変驚いています。
追加のコメントもありがとうございます。
とても為になりました。ありがとうございました！！

Answer 2

<div class="button_plan_9">
  <div class="cnt_plan_9">cnt_plan_9</div>
</div>
<div class="button_plan_b">
  <div class="cnt_plan_b">cnt_plan_b</div>
</div>
<div class="a button_plan_0">
  <div class="cnt_plan_0">cnt_plan_0</div>
</div>

$( _=> {
  $( '[class*="button_plan_"]' ).filter( function() {
    var num = this.className.match( /(?:^|\s)button_plan_(\d+)(?:$|\s)/ );
    if ( num ) {
      $( this ).data( 'num', num[ 1 ] );
      return true;
    } else {
      return false;
    }
  } ).on( 'click', function( index, element ) {
    var num = $( this ).data( 'num' );
    $( '.cnt_plan_' + num ).css( 'background', '#c8ebcc' )
  } );
} );
```**動くサンプル：**[https://jsfiddle.net/arhb0yg1/](https://jsfiddle.net/arhb0yg1/)

---

【属性セレクタ (E[foo*="bar"])｜セレクタ｜CSS HappyLife ZERO】
[http://zero.css-happylife.com/selectors/attribute_selectors_07.shtml](http://zero.css-happylife.com/selectors/attribute_selectors_07.shtml)

【hasClass で regex（正規表現）を使おうとしました - Qiita】
[https://qiita.com/mochizukikotaro/items/0a281163bdb94772b766](https://qiita.com/mochizukikotaro/items/0a281163bdb94772b766)

【クラス操作はclassListで楽々です。（DOMおれおれAdvent Calendar 2015 – 05日目） | Ginpen.com】
[https://ginpen.com/2015/12/07/el-classlist/](https://ginpen.com/2015/12/07/el-classlist/)

【String.prototype.match() - JavaScript | MDN】
[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/match](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/match)

【.filter() | jQuery API Documentation】
[http://api.jquery.com/filter/](http://api.jquery.com/filter/)

Answer 3

例えばそれぞれに共通のクラスを足すだけでも処理を一つにまとめられると思いますよ。

<button class="button_plan_01 button_plan"></button>
<button class="button_plan_02 button_plan"></button>

$(".button_plan").click(function(){
//処理
});

こんな感じです。

【追記】

<div class="button_plan_01 button_plan" data-cnt="cnt_plan_01">button</div>
<div class="cnt_plan_01">contents</div>

<div class="button_plan_02 button_plan" data-cnt="cnt_plan_02">button</div>
<div class="cnt_plan_02">contents</div>


$(".button_plan").click(function(){
 var cnt = $(this).data('cnt');
 $("."+cnt).slideToggle();
});

data属性でclass名を持っておくっていう方法もありますね。

Comments

[退会済みユーザー]

中の処理のセレクタも違うのでは？

[hiroakitajima]

btn_01はcnt_01,btn_02はcnt_02に連動する処理を行いたいです。

Answer 4

連動させたい要素をdiv等でグルーピングしてやると楽かもしれません。

<div class="area_plan">
    <div class="button_plan">button1</div>
    <div class="cnt_plan">contents1</div>
</div>
<div class="area_plan">
    <div class="button_plan">button2</div>
    <div class="cnt_plan">contents2</div>
</div>

$(function(){
      $('.button_plan').on('click', function(){
          $(this).closest('.area_plan').find('.cnt_plan').slideToggle();
      });
  });

Comments

[hiroakitajima]

すみません、html簡略して書いてしまったのですが、実際はボタンとコンテンツが分かれていてグループ化できない想定です。

Answer 5

一応以下sampleつけます

$(function(){
  var reg=/^button_plan_(.+)/;
  var target=".cnt_plan_";
  $('[class]').filter(function(){
    var flg=false;
    $.each($(this).prop('classList'),function(x,y){
      if(y.match(reg)) flg=true; 
    });
    return flg;
  }).on('click',function () {
    $.each($(this).prop('classList'),function(x,y){
      if(r=y.match(reg)){
        $(".cnt_plan_"+r[1]).slideToggle();
      }
    });
  });
});

<input type="button" class="button_plan_01" value="1">
<input type="button" class="button_plan_02" value="2">
<input type="button" class="dummy button_plan_01" value="3">
<input type="button" class="button_plan_01 button_plan_02" value="4">
<input type="button" class="dummy" value="5">
<input type="button" value="6">

class名の一部を利用した処理は使い勝手があまりよくありません。
運用方法を検討されたほうが良いと思います。

※buttn_plan_*は一つのタグについて複数設定されている可能性があります
それぞれに反応するように処理が必要です