【冗長なコードを簡略するコツを教えてください！】jQueryでタブ切替を実装中

###前提・実現したいこと
プログラミング初心者です！
JSコードを簡略化させたい。
また簡略化するコツがあればおしえていただけると幸いです！

###現在の状況
jQuery を使用して４つのタブ切り替えを行います。
タブを切り替えるごとにhoge0〜3のhtmｌ要素が表示、非表示になる実装です。

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

$(function(){
    $('.js-hoge > li > a:eq(0)').on('click',function(){
        $('.js-hoge0').fadeIn();
        $('.hoge1, .hoge2, .hoge3').fadeOut();
    });

    $('.js-hoge > li > a:eq(1)').on('click',function(){
        $('.hoge1').fadeIn();
        $('.hoge0, .hoge2, .hoge3').fadeOut();
    });

    $('.js-hoge > li > a:eq(2)').on('click',function(){
        $('.hoge2').fadeIn();
        $('.hoge1, .hoge0, .hoge3').fadeOut();
    });

    $('.js-hoge > li > a:eq(3)').on('click',function(){
        $('.hoge3').fadeIn();
        $('.hoge0, .hoge1, .hoge2').fadeOut();
    });
});

ｈｔｍｌ

　　　　<nav class="mainMenu">
            <ul class="clearfix js-hoge">
                <li><a href="javascript:void(0)" </a>要素１</li>
                <li><a href="javascript:void(0)"</a>要素２</li>
                <li><a href="javascript:void(0)"</a>要素３</li>
                <li><a href="javascript:void(0)" </a>要素４</li>
            </ul>
        </nav>
      <div class="hoge0">要素１</div>
      <div class="hoge1">要素２</div>
      <div class="hoge2">要素３</div>
      <div class="hoge3">要素４</div>

s8_chu

2017/10/19 15:08

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

yuyuuyu

2017/10/19 15:17

ありがとうございます！htmlを追記いたしました。

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

回答6件

aタグの開始タグが終わっていないことと、終了タグがないことを修正したうえで、以下のように行うことができると思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6</head>
7<body>
8<nav class="mainMenu">
9    <ul class="clearfix js-hoge">
10        <li><a href="javascript:void(0)">要素１</a></li>
11        <li><a href="javascript:void(0)">要素２</a></li>
12        <li><a href="javascript:void(0)">要素３</a></li>
13        <li><a href="javascript:void(0)">要素４</a></li>
14    </ul>
15</nav>
16<div class="hoge0">要素１</div>
17<div class="hoge1">要素２</div>
18<div class="hoge2">要素３</div>
19<div class="hoge3">要素４</div>
20<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
21<script>
22    $(function () {
23        $(".js-hoge > li > a").on("click", function () {
24            var i = $(".js-hoge > li").index($(this).parent());
25            $(".hoge" + i).fadeIn();
26            $("body div:not(.hoge" + i + ")").fadeOut();
27        });
28    });
29</script>
30</body>
31</html>

投稿2017/10/19 15:43

編集2017/10/19 15:52

s8_chu

総合スコア14731

$('.js-hoge > li > a:eq(3)')

このようなDOMへのアクセスはできますが、多用すると動作が遅くなる傾向にあるので注意が必要です。
最も負荷が少なく早いのはidによるアクセスです。

classとidをうまく使い分けることで以下のようなシンプルなコードが書けると思います。

html
1<nav class="mainMenu">
2  <ul class="clearfix js-hoge">
3    <li><a href="#tab1" class="menu">要素１</a></li>
4    <li><a href="#tab2" class="menu">要素２</a></li>
5    <li><a href="#tab3" class="menu">要素３</a></li>
6    <li><a href="#tab4" class="menu">要素４</a></li>
7  </ul>
8</nav>
9<div id="tab1" class="tab">要素１</div>
10<div id="tab2" class="tab">要素２</div>
11<div id="tab3" class="tab">要素３</div>
12<div id="tab4" class="tab">要素４</div>

css
1.tab{
2  display: none;/*すべて非表示*/
3}
4#tab1{
5  display:block; /*最初のタブは表示とする（上書き）*/
6}

javascript
1$(function(){
2  // メニュークラスクリックのイベント登録
3  $('.menu').on('click', function(){
4    $('.tab').hide(); // tab class をすべて非表示
5    var id = $(this).attr('href'); // クリックしたDOMのhref要素を取得
6    $(id).show(); // hrefの内容がidと一致するものを表示
7  })
8})

投稿2017/10/19 15:41

cookieman

総合スコア128

idやclassを利用せずに処理したいならdata-*でしょうね

javascript
1$(function(){
2  $('a[data-target]').on('click',function(){
3    $('[data-self]').hide().filter('[data-self="'+$(this).data('target')+'"]').show();
4  });
5});

HTML
1<nav class="mainMenu">
2<ul class="clearfix js-hoge">
3<li><a href="#" data-target="hoge0">要素１</a></li>
4<li><a href="#" data-target="hoge1">要素２</a></li>
5<li><a href="#" data-target="hoge2">要素３</a></li>
6<li><a href="#" data-target="hoge3">要素４</a></li>
7</ul>
8</nav>
9<div data-self="hoge0">要素１</div>
10<div data-self="hoge1" style="display:none">要素２</div>
11<div data-self="hoge2" style="display:none">要素３</div>
12<div data-self="hoge3" style="display:none">要素４</div>

投稿2017/10/20 00:40

yambejp

総合スコア114769

ベストアンサー

デザイナー側の問題でHTMLが触れない、などの制約があれば、こんな方法もあります。
一番シンプルなやつですね。

javascript
1function fadeInOutAct(target, fadein, fadeout) {
2    target.on('click', function () {
3        fadein.fadeIn();
4        fadeout.fadeOut();
5    });
6}
7
8$(function () {
9    fadeInOutAct('.js-hoge > li > a:eq(0)',
10        '.js-hoge0',
11        '.hoge1, .hoge2, .hoge3')
12    fadeInOutAct('.js-hoge > li > a:eq(1)',
13        '.js-hoge1',
14        '.hoge0, .hoge2, .hoge3')
15    fadeInOutAct('.js-hoge > li > a:eq(2)',
16        '.js-hoge2',
17        '.hoge1, .hoge0, .hoge3')
18    fadeInOutAct('.js-hoge > li > a:eq(3)',
19        '.js-hoge3',
20        '.hoge0, .hoge1, .hoge2')
21});

投稿2017/10/21 03:47

KONDO-Yuuki

総合スコア18

ネストがちょっと深くなっちゃったけど、
こんなアプローチはどうかな？

JavaScript
1$(function(){
2    [0, 1, 2, 3].forEach(function(it){
3        $('.js-hoge > li > a:eq(' + it + ')').on('click',function(){
4            $('.js-hoge' + it).fadeIn();
5            var targets = [0, 1, 2, 3]
6                .filter(function(target){return it !== target;})
7                .map(function(target){return '.hoge' + target;})
8                .join(', ');
9            $(targets).fadeOut();
10        });
11    });
12});