jQueryのフェードイン1、私はこのような機能を持つ複数のdiv

Question

をフェードアウト：

$(document).ready(function(){ 
    $("#showt").click(function(){ 
    $(".t").fadeIn("fast"); 
    }); 
    $("#showt").click(function(){ 
    $(".m").fadeOut(0); 
    }); 
    $("#showt").click(function(){ 
    $(".a").fadeOut(0); 
    }); 
}); 

$(document).ready(function(){ 
    $("#showm").click(function(){ 
    $(".m").fadeIn("fast"); 
    }); 
    $("#showm").click(function(){ 
    $(".t").fadeOut(0); 
    }); 
    $("#showm").click(function(){ 
    $(".a").fadeOut(0); 
    }); 
}); 

$(document).ready(function(){ 
    $("#showa").click(function(){ 
    $(".a").fadeIn("fast"); 
    }); 
    $("#showa").click(function(){ 
    $(".t").fadeOut(0); 
    }); 
    $("#showa").click(function(){ 
    $(".m").fadeOut(0); 
    }); 
}); 

だから、特定のIDとのリンクのクリック時に、それが1を示しているが、他のブロックを隠し、すべてが完璧に動作しますが、私は」ちょうど興味深いのは、関数のコードを減らす方法はありますか？

ありがとうございます。

HTML：

<a href="#" class="tag" id="showt">ttt</a> 
<a href="#" class="tag" id="showm">mmm</a> 
<a href="#" class="tag" id="showa">aaa</a>   

<div class="row"> 
    <div class="col-1"></div> 
    <div class="col-2"> 
    <div class="t"> 
     Ttt 
    </div> 
    <div class="m"> 
     Mmm 
    </div> 
    <div class="a"> 
     Aaa 
    </div> 
</div> 
<div class="col-3"> 
    <div class="t"> 
     Ttt 
    </div> 
    <div class="m"> 
     Mmm 
    </div> 
    <div class="a"> 
     Aaa 
    </div> 
</div> 
<div class="col-4"></div> 

Answer 1

カスタム属性を使用してコードをかなり統合することができます。私は、リンクが表示したいクラスを示すために名前を選択しました。 .t、.m、および.a以上のクラスを追加する予定がある場合は、すべてのクラス（.t, .m, .a）に共通する2次クラスを追加してフェードアウトさせることができます。さらに、.hide()関数を使用してコードを少し簡単にすることができます（.fadeOut(0)ではなく）。

$(document).ready(function(){ 
 
    $(".showStuff").click(function(){ 
 
    $(".t, .m, .a").hide(); 
 
    $("." + $(this).attr("show-class")).fadeIn("fast"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="tag showStuff" show-class="t">ttt</a> 
 
<a href="#" class="tag showStuff" show-class="m">mmm</a> 
 
<a href="#" class="tag showStuff" show-class="a">aaa</a>   
 

 
<div class="row"> 
 
    <div class="col-1"></div> 
 
    <div class="col-2"> 
 
    <div class="t"> 
 
     Ttt 
 
    </div> 
 
    <div class="m"> 
 
     Mmm 
 
    </div> 
 
    <div class="a"> 
 
     Aaa 
 
    </div> 
 
</div> 
 
<div class="col-3"> 
 
    <div class="t"> 
 
     Ttt 
 
    </div> 
 
    <div class="m"> 
 
     Mmm 
 
    </div> 
 
    <div class="a"> 
 
     Aaa 
 
    </div> 
 
</div> 
 
<div class="col-4"></div>

Answer 2

あなたは現在の状態を切り替えるためにトグル（）を使用することができます。 here is the link for api

また、同様の作業のためにコールバック関数として機能する関数を作成することもできます。同様に

$（ '。bar'）。クリック（コールバック）。