JQuery fadeIn un, fadeOut plusieurs divs

Question

J'ai une fonction comme ceci:

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

Ainsi, sur un clic d'un lien avec un certain ID il montre un, mais cache d'autres blocs, tout fonctionne parfaitement, mais je Je suis juste intéressé est-il un moyen de réduire le code de la fonction?

Merci.

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

Vous pouvez considérablement consolider votre code en utilisant des attributs personnalisés; J'ai choisi le nom pour désigner la classe que le lien veut montrer. Si vous envisagez d'ajouter plus de classes que simplement .t, .m et .a, vous pouvez ajouter une classe secondaire que tous (.t, .m, .a) ont en commun et l'éteindre. En outre, vous pouvez utiliser la fonction .hide() pour rendre votre code un peu plus simple (plutôt que .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

Vous pouvez utiliser bascule() pour basculer l'état actuel. here is the link for api

Aussi à réduire, vous pouvez faire une fonction qui fonctionnera comme fonction de rappel pour un travail similaire. Comme

$ ('.bar'). Cliquez sur (rappel);