JQuery와 fadeIn 하나, 페이드 아웃 여러 div의

Question

나는이 같은 기능을 가지고 다른 블록이 하나를 보여줍니다 특정 ID와 링크의 클릭에 따라서

$(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); 
    }); 
}); 

, 그러나 숨 깁니다, 모든 것이 완벽하게 작동하지만 난 ' 그냥 함수의 코드를 줄이는 방법이 있습니까?

감사합니다.

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)에 공통으로 포함 된 클래스를 사라지게 할 수 있습니다. 또한 .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

또한 줄이기 위해 비슷한 작업에 콜백 함수로 사용할 수있는 함수를 만들 수 있습니다. Like

$ ('. bar') 클릭 (콜백);