Javascriptで同じ処理を関数でまとめたい

###前提・実現したいこと
Javascriptで同じ処理を関数を使用してまとめるにはどうすれば良いか困っています。
同じ処理を、いくつも同じ関数を書いて実現すると冗長になってしまい見た目も美しくないため
ひとつの関数でまとめたいと思っています。
自分なりに調べてみたのですが、JS初心者のため理解が足りず・・・
宜しくお願い致します。

<!--tab1-->
<div>
<h2>タイトル１</h2>
<ul class="tab1">
<li class="select">タブA</li>
<li>タブB</li>
</ul>
<div class="area1">
<div>ああああ</div>
</div>
<div class="area1 disnon">
<div>いいい</div>
</div>
</div>


<!--tab2-->
<div>
<h2>タイトル２</h2>
<ul class="tab2">
<li class="select">タブA</li>
<li>タブB</li>
</ul>
<div class="area2">
<div>ああああ</div>
</div>
<div class="area2 disnon">
<div>いいい</div>
</div>
</div>


<!--tab3-->
<div>
<h2>タイトル３</h2>
<ul class="tab3">
<li class="select">タブA</li>
<li>タブB</li>
</ul>
<div class="area3">
<div>ああああ</div>
</div>
<div class="area3 disnon">
<div>いいい</div>
</div>
</div>


<!--tab4-->
<div>
<h2>タイトル４</h2>
<ul class="tab4">
<li class="select">タブA</li>
<li>タブB</li>
</ul>
<div class="area4">
<div>ああああ</div>
</div>
<div class="area4 disnon">
<div>いいい</div>
</div>
</div>

//tab1
$(".tab1 li").on('click touchstart', function () {
  var num1 = $(".tab1 li").index(this);
  $(".area1").addClass('disnon').eq(num1).removeClass('disnon');
  $(".tab1 li").removeClass('select');
  $(this).addClass('select');
});

//tab2
$(".tab2 li").on('click touchstart', function () {
    var num2 = $(".tab2 li").index(this);
    $(".area2").addClass('disnon').eq(num2).removeClass('disnon');
    $(".tab2 li").removeClass('select');
    $(this).addClass('select');
});

//tab3
$(".tab3 li").on('click touchstart', function () {
    var num3 = $(".tab3 li").index(this);
    $(".area3").addClass('disnon').eq(num3).removeClass('disnon');
    $(".tab3 li").removeClass('select');
    $(this).addClass('select');
});

//tab4
$(".tab4 li").on('click touchstart', function () {
    var num4 = $(".tab4 li").index(this);
    $(".area4").addClass('disnon').eq(num4).removeClass('disnon');
    $(".tab4 li").removeClass('select');
    $(this).addClass('select');
});

s8_chu

2017/03/17 06:47

HTMLの追記をしていただけませんか？

退会済みユーザー

2017/03/17 06:47

html部分も合わせてご提示ください。

退会済みユーザー

2017/03/17 07:12

失礼いたしました。htmlを追記いたしました。

行動規範の内容に同意します

回答2件

ベストアンサー

ちょっと頑張った感が半端ないですが・・・

javascript
1$("ul li").on('click touchstart', function () {
2  var LIs = $(this).parent().children('li');
3  var num = LIs.index(this);
4  $(this).parent().nextAll('div').addClass('disnon').eq(num).removeClass('disnon');
5  LIs.removeClass('select');
6  $(this).addClass('select');
7});

投稿2017/03/17 07:24

shi_ue

総合スコア4437

退会済みユーザー

2017/03/17 07:34

ありがとうございます！こちらのコードを元に問題なく動かすことができました！もっとJSを勉強していきたいと思います。

行動規範の内容に同意します

自分ならこんな感じにします。これならHTMLで.tab1, .tab2 ... などと区別する必要もないです。

html
1<div>
2<h2>タイトル１</h2>
3<ul class="tab">
4<li class="select">タブA</li>
5<li>タブB</li>
6</ul>
7<div>
8<div>ああああ</div>
9</div>
10<div class="disnon">
11<div>いいい</div>
12</div>
13</div>
14
15
16<!--tab2-->
17<div>
18<h2>タイトル２</h2>
19<ul class="tab">
20<li class="select">タブA</li>
21<li>タブB</li>
22</ul>
23<div>
24<div>ああああ</div>
25</div>
26<div class="disnon">
27<div>いいい</div>
28</div>
29</div>
30
31
32<!--tab3-->
33<div>
34<h2>タイトル３</h2>
35<ul class="tab">
36<li class="select">タブA</li>
37<li>タブB</li>
38</ul>
39<div>
40<div>ああああ</div>
41</div>
42<div class="disnon">
43<div>いいい</div>
44</div>
45</div>
46
47
48<!--tab4-->
49<div>
50<h2>タイトル４</h2>
51<ul class="tab">
52<li class="select">タブA</li>
53<li>タブB</li>
54</ul>
55<div>
56<div>ああああ</div>
57</div>
58<div class="disnon">
59<div>いいい</div>
60</div>
61</div>

js
1$(".tab li").on('click touchstart', function () {
2	var num = $(this).index();
3	$(this).parent().nextAll("div").addClass('disnon').eq(num).removeClass('disnon');
4	$(this).addClass('select').siblings().removeClass('select')
5});