JQuery fadeIn ein, fadeOut mehrere divs

Question

Ich habe eine Funktion wie folgt aus:

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

So auf einem Klick auf eine Verbindung mit einer bestimmten ID es einem zeigt, sondern versteckt sich andere Blöcke, funktioniert alles perfekt, aber ich Mich interessiert nur, gibt es eine Möglichkeit, den Code der Funktion zu reduzieren?

Vielen Dank.

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

Sie können Ihren Code erheblich konsolidieren, indem Sie benutzerdefinierte Attribute verwenden; Ich wählte den Namen , um die Klasse anzugeben, die der Link anzeigen möchte. Wenn Sie planen, weitere Klassen als nur .t, .m und .a hinzuzufügen, können Sie eine sekundäre Klasse hinzufügen, die alle gemeinsam haben (.t, .m, .a) und diese ausblenden. Darüber hinaus können Sie die -Funktion verwenden, um Ihren Code ein wenig einfacher zu machen (anstatt .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

könnten Sie verwenden Toggle(), um den aktuellen Status zu wechseln. here is the link for api

Auch zu reduzieren, können Sie eine Funktion, die als Callback-Funktion für ähnliche Arbeit arbeiten wird. Wie

$ ('. Bar'). Klicken (Rückruf);