同じような処理を配列でまとめるには

Question

以下のようなコードを配列でまとめたいと思い、
まとめる前は上手くいったのですが、まとめると上手くいきませんでした。

【まとめる前のコード】

$('#btnTabA').click(function(){
	$(this).css('background','#ef857d');
	$('#btnTab > div').not(this).css('background','#7bcad1');
	$('#btnA').css('z-index','1');
	$('#btnInner > div').not('#btnA').css('z-index','0');
});
$('#btnTabB').click(function(){
	$(this).css('background','#ef857d');
	$('#btnTab > div').not(this).css('background','#7bcad1');
	$('#btnB').css('z-index','1');
	$('#btnInner > div').not('#btnB').css('z-index','0');
});
$('#btnTabC').click(function(){
	$(this).css('background','#ef857d');
	$('#btnTab > div').not(this).css('background','#7bcad1');
	$('#btnC').css('z-index','1');
	$('#btnInner > div').not('#btnC').css('z-index','0');
});

【まとめた後のコード】

var btn = ['#btnA', '#btnB', '#btnC'],
btnTab = ['#btnTabA', '#btnTabB', '#btnTabC'],
btnLen = btn.length;

for(var i = 0; i > btnLen; i++){
$(btnTab[i]).click(function(){
	$(this).css('background','#ef857d');
	$('#btnTab > div').not(this).css('background','#7bcad1');
	$(btn[i]).css('z-index','1');
	$('#btnInner > div').not(btn[i]).css('z-index','0');
});

まとめた場合の結果としては、なにかしらのbtnTabをクリックするとbtnTabCのzIndexが1になり、
それ以降はどこをクリックしても変わらない状態です。

どなたか分かる方がいましたら教えていただけたら幸いです。

Comments

[kei344]

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

[natsuhayate8]

修正しました、ご指摘ありがとうございます！

Answer 1

同じような構造の繰り返し、ということで配列で解決する、という方向で考えられたと思いますが、JavaScript 内のコードの構造（配列）で解決するより、HTML の構造を利用する方がすっきりするかもしれません。

示していただいたコードからは HTML がどのようになっているかわからない点も多いですが、おそらく、次のようになっているものと思います。

<div id="btnTab">
  <div id="btnTabA">TabA</div>
  <div id="btnTabB">TabB</div>
  <div id="btnTabC">TabC</div>
</div>
<div id="btnInner">
  <div id="btnA">A</div>
  <div id="btnB">B</div>
  <div id="btnC">C</div>
</div>

もし、このようになっているのであれば、対応する tab と btn を id で識別することによって、次のように書くこともできます。

$(function() {
  var $tabContainer = $('#btnTab');
  var $btnContainer = $('#btnInner');
  $tabContainer.children('div').each(function() {
    var $tab = $(this);
    var id = $tab.attr('id');
    var btnId = 'btn' + id.substr(6);
    var $btn = $('#' + btnId);
    $tab.on('click', function() {
      $tab.css('background','#ef857d');
      $tabContainer.children(':not("#' + id + '")').css('background','#7bcad1');
      $btn.css('z-index','1');
      $btnContainer.children(':not("#' + btnId + '")').css('z-index','0');
   });
  });
});

id を文字列操作で作るのが気持ち悪いと思うのであれば、data-* カスタム属性を tab と btn 双方につけて、それで対応をつけるというのでもよいと思います。

Comments

[natsuhayate8]

私の発想にはない書き方だったので、非常に参考になりました！
HTMLの構造を利用するという意識にも目を向けていきたいと思います。

Answer 2

類似の質問でこんなのもあります。
https://teratail.com/questions/33540

回避策はいろいろありますが、一例を。

var onclickFunc = function(a){
  return function(){
    $(btnTab[a]).css('background','#ef857d');
    $('#btnTab > div').not(btnTab[a]).css('background','#7bcad1');
    $(btn[a]).css('z-index','1');
    $('#btnInner > div').not(btn[a]).css('z-index','0');
  };
};
for(var i = 0; i > btnLen; i++){
  $(btnTab[i]).click(onclickFunc(i));
}

Comments

[natsuhayate8]

tkturbo様の解答と類似の質問を見て問題が解決しました！
$(btnTab[i]).click(onclickFunc(i));の外側に無名関数を定義することで、実行できました。
どうもありがとうございます！