インクリメント処理のコードの纏め方

Question

$('#sample1').on('click', function() {
$('#hide1').hide();
$('li:nth-child(1)').show();
});
$('#sample2').on('click', function() {
$('#hide2').hide();
$('li:nth-child(2)').show();
});
$('#sample3').on('click', function() {
$('#hide3').hide();
$('li:nth-child(3)').show();
});

数字部分がインクリメントなので、
上記のような連番処理を一つに纏めたいと思うのですが、どのような方法が考え得ますでしょうか。

また、上記がid指定で最も単純な形だと思われますが、纏める場合より、jsの処理速度としては最も速い形となりますでしょうか。

Answer 1

#パターン1：属性セレクタでまとめる

$("[id^=sample]").on("click", function() {
  var num = this.id.substring(6);
  $("#hide" + num).hide();
  $("li:nth-child(" + num + ")").show();
});

#パターン2：イベントハンドラは親要素に仕掛ける
イベントハンドラは#sample1～の親要素（祖先要素でも可）に仕掛けます。発生源はevent.targetで特定し、idから番号を取り出します。

$("body").on("click", function(e) {
  var t = e.target;
  var num;

  if(t.tagName === "P") {
    num = event.target.id.substring(6);
    $("#hide" + num).hide();
    $("li:nth-child(" + num + ")").show();
  }
});

• 手元でテストした時は、body要素に直置きしたので、仕掛け先がbody要素になっています。
• #sample1～は適当にp要素にしたので、tagNameがPかどうかでチェックしています。

#パターン3：1つ1つ仕掛けていく（元の方法）
（割愛）

#実行速度の実測

• p#sample1～10000、liを10000個、div#hide1～10000まで用意して実験
• テスト環境はChrome、jQueryは2.2.3使用
• $.onの仕掛けにかかる時間のみで、関数そのものの速度は考慮していません。

パターン1：3回平均80ms
パターン2：3回平均2ms
パターン3：3回平均148ms

#結論
イベントハンドラの仕掛けに限れば、親または祖先要素に仕掛けて、$.onの回数自体を減らしたほうが効果的かと思います。

個人的には1が最も遅いと予測していたのですが…単純にソースの長さとかかな…？3はテストだと何万行もありましたので。

Answer 2

単にiで回して作ると同じiを見に行くので、即時関数で囲む必要があります。jQueryオブジェクト取得を事前に行っているため、クリックしたときの速度は元のコードより速くなっているはずです。

for (let i = 1; i <= 3; i++) {
  ((b, h, l) => {
    b.on('click', () => {
      h.hide();
      l.show();
    });
  })($(`#sample${i}`), $(`#hide${i}`), $(`li:nth-child(${i})`));
}

IE11などECMAscript2015に対応していないブラウザでも動かしたい場合は、Babel等でトランスパイルしてから使ってください。

Answer 3

タグ名でアクセスしてidを拾えばよいのでは？

$(function(){
  $('div').click( function() {
    if(r=$(this).prop('id').match(/^sample([0-9]+)$/)){
      $('#hide'+r[1]).hide();
      $('li:nth-child('+r[1]+')').show();
      }
  });
});

#追記
どうしてもforで回したidを利用してアクセスしたいならこんな感じ？

$(function(){
  for(var i = 1; i <= 3; i++) {
    $('#sample'+i).data('i',i);
    $('#sample'+i).click( function() {
      var i=$(this).data('i');
      $('#hide'+i).hide();
      $('li:nth-child('+i+')').show();
    });
  }
}); 

Comments

[yamato_hikawa]

あらゆるdiv要素をクリックするとこの処理を行う形なのがネックですね。

Answer 4

私だったら1つの関数を用意してそれでまかなえるようにします。
ボタンに紐づく対象をそれぞれ事前に取得するようにして、イベント時にその対象を操作する形です。

<div class="sample" data-index="1">test1</div>
<div class="sample" data-index="2">test2</div>
<div class="sample" data-index="3">test3</div>

<div class="hide" data-index="1">hide1</div>
<div class="hide" data-index="2">hide2</div>
<div class="hide" data-index="3">hide3</div>

<ul class="list">
  <li data-index="1">show1</li>
  <li data-index="2">show2</li>
  <li data-index="3">show3</li>
</ul>

.list li {
  display: none;
}

var Sample = function(selector){
  this.$btn = $(selector);
  this.init();
};

Sample.prototype = {
  init: function(){
    /* indexの値を元に操作対象を絞り込み */
    this.index = this.$btn.data('index');
    this.$hide = this.getTarget('.hide', this.index);
    this.$show = this.getTarget('.list li', this.index);
    this.bindEvent();
  },
  getTarget: function(selector, index){
    return $(selector).filter(function(){
      return $(this).data('index') === index;
    });
  },
  bindEvent: function(){
    var _self = this;
    
    this.$btn.on('click', function(){
      _self.toggle();
    });
  },
  toggle: function(){
    this.$hide.hide();
    this.$show.show();
  }
};

$('.sample').each(function(){
  new Sample(this);
});

Answer 5

回答しましたが、無名関数の考慮がもれていたので、無視してください。すみません。

for(var i = 1; i <= 3; i++) {
  $('#sample' + i).on('click', function() { 
  $('#hide' + i).hide(); 
  $('li:nth-child(' + i + ')').show(); 
  }); 
}

Comments

[raccy]

これで、本当にうまくいきますか？作られた3つの無名関数内全てで、iが常に3になりませんか？(ほかにも0から始まっている、'li:nth-child(i)'でのiがただの文字になっているというのもありますけど)

[popobot]

あら、無名関数であることをあまり意識してなかったです...色々ミスってましたね...すみません。ご指摘ありがとうございました！