I have a function like this:
$(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 on a click of a link with a certain ID it shows one, but hides other blocks, everything works perfectly but I'm just interested is there a way to reduce the function's code?
Thank you.
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>
You could use toggle() to toggle the current state. here is the link for api
Also to reduce, you can make a function which will work as callback function for similar work. Like
$('.bar').click(callback);
You can considerably consolidate your code by using custom attributes; I chose the name show-class
to denote the class the link wants to show. If you plan to add more classes than just .t
, .m
, and .a
you could add a secondary class that all of them ( .t, .m, .a
) have in common, and fade that out. Additionally, you can use the .hide()
function to make your code a little simpler (rather than .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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.