Shortening Jquery
I have a specific on click event where if i click on the first image, the first row appears on a different section. Is there a way to shorten this code? i'm not very familiar with jquery
this is the code:
4 Replies
<script>
jQuery(function($){
$( ".row2, .row3, .row4, .row5" ).hide();
$( ".day1" ).click(function() {
$( ".day-low1" ).addClass("border-day-light");
$( ".day-low2" ).removeClass("border-day-dark");
$( ".day-low3" ).removeClass("border-day-light");
$( ".day-low4" ).removeClass("border-day-dark");
$( ".day-low5" ).removeClass("border-day-light");
$( ".row1" ).delay(650).fadeIn("slow");
$( ".row2" ).fadeOut( "slow" );
$( ".row3" ).fadeOut( "slow" );
$( ".row4" ).fadeOut( "slow" );
$( ".row5" ).fadeOut( "slow" );
});
$( ".day2" ).click(function() { $( ".day-low1" ).removeClass("border-day-light"); $( ".day-low2" ).addClass("border-day-dark"); $( ".day-low3" ).removeClass("border-day-light"); $( ".day-low4" ).removeClass("border-day-dark"); $( ".day-low5" ).removeClass("border-day-light");
$( ".row1" ).fadeOut( "slow" ); $( ".row2" ).delay(650).fadeIn("slow"); $( ".row3" ).fadeOut( "slow" ); $( ".row4" ).fadeOut( "slow" ); $( ".row5" ).fadeOut( "slow" ); }); $( ".day3" ).click(function() { $( ".day-low1" ).removeClass("border-day-light"); $( ".day-low2" ).removeClass("border-day-dark"); $( ".day-low3" ).addClass("border-day-light"); $( ".day-low4" ).removeClass("border-day-dark"); $( ".day-low5" ).removeClass("border-day-light"); $( ".row1" ).fadeOut( "slow" ); $( ".row2" ).fadeOut( "slow" ); $( ".row3" ).delay(650).fadeIn("slow"); $( ".row4" ).fadeOut( "slow" ); $( ".row5" ).fadeOut( "slow" ); }); $( ".day4" ).click(function() { $( ".day-low1" ).removeClass("border-day-light"); $( ".day-low2" ).removeClass("border-day-dark"); $( ".day-low3" ).removeClass("border-day-light"); $( ".day-low4" ).addClass("border-day-dark"); $( ".day-low5" ).removeClass("border-day-light");
$( ".row1" ).fadeOut( "slow" ); $( ".row2" ).fadeOut( "slow" ); $( ".row3" ).fadeOut( "slow" ); $( ".row4" ).delay(650).fadeIn("slow"); $( ".row5" ).fadeOut( "slow" ); }); $( ".day5" ).click(function() { $( ".day-low1" ).removeClass("border-day-light"); $( ".day-low2" ).removeClass("border-day-dark"); $( ".day-low3" ).removeClass("border-day-light"); $( ".day-low4" ).removeClass("border-day-dark"); $( ".day-low5" ).addClass("border-day-light");
$( ".row1" ).fadeOut( "slow" ); $( ".row2" ).fadeOut( "slow" ); $( ".row3" ).fadeOut( "slow" ); $( ".row4" ).fadeOut( "slow" ); $( ".row5" ).delay(650).fadeIn("slow"); }); }); </script> it repeat itself 5 times but different classes
$( ".day2" ).click(function() { $( ".day-low1" ).removeClass("border-day-light"); $( ".day-low2" ).addClass("border-day-dark"); $( ".day-low3" ).removeClass("border-day-light"); $( ".day-low4" ).removeClass("border-day-dark"); $( ".day-low5" ).removeClass("border-day-light");
$( ".row1" ).fadeOut( "slow" ); $( ".row2" ).delay(650).fadeIn("slow"); $( ".row3" ).fadeOut( "slow" ); $( ".row4" ).fadeOut( "slow" ); $( ".row5" ).fadeOut( "slow" ); }); $( ".day3" ).click(function() { $( ".day-low1" ).removeClass("border-day-light"); $( ".day-low2" ).removeClass("border-day-dark"); $( ".day-low3" ).addClass("border-day-light"); $( ".day-low4" ).removeClass("border-day-dark"); $( ".day-low5" ).removeClass("border-day-light"); $( ".row1" ).fadeOut( "slow" ); $( ".row2" ).fadeOut( "slow" ); $( ".row3" ).delay(650).fadeIn("slow"); $( ".row4" ).fadeOut( "slow" ); $( ".row5" ).fadeOut( "slow" ); }); $( ".day4" ).click(function() { $( ".day-low1" ).removeClass("border-day-light"); $( ".day-low2" ).removeClass("border-day-dark"); $( ".day-low3" ).removeClass("border-day-light"); $( ".day-low4" ).addClass("border-day-dark"); $( ".day-low5" ).removeClass("border-day-light");
$( ".row1" ).fadeOut( "slow" ); $( ".row2" ).fadeOut( "slow" ); $( ".row3" ).fadeOut( "slow" ); $( ".row4" ).delay(650).fadeIn("slow"); $( ".row5" ).fadeOut( "slow" ); }); $( ".day5" ).click(function() { $( ".day-low1" ).removeClass("border-day-light"); $( ".day-low2" ).removeClass("border-day-dark"); $( ".day-low3" ).removeClass("border-day-light"); $( ".day-low4" ).removeClass("border-day-dark"); $( ".day-low5" ).addClass("border-day-light");
$( ".row1" ).fadeOut( "slow" ); $( ".row2" ).fadeOut( "slow" ); $( ".row3" ).fadeOut( "slow" ); $( ".row4" ).fadeOut( "slow" ); $( ".row5" ).delay(650).fadeIn("slow"); }); }); </script> it repeat itself 5 times but different classes
Step 1: Don't use jQuery
Step 2: Learn about event delegation
Step 3: ???
Step 4: Profit!
Step 1
Everything that you have there can be done very easily with vanilla JS. In fact, jQuery is mostly obsolete at this point because the ease of jQ was used for the template for adding the functionality to the DOM API.
Step 2
Event Delegation is where you listen to one event on a parent element and based on the event target you do something. That way you have one event listener on one element instead of 5 listeners on 5 elements. That way you update the code in one place and you're golden.
Step 3
This is a meme step :p
Step 4
Using a combination of event delegation and vanilla JS you should be good to go!
ah, so i just don't need to use jquery anymore, i'll try to learn vanilla js in itself then xD
alright thanks!
Yeah, jQuery is mostly obsolete, except if you're making WordPress themes (because they all use jQ) or maintaining a legacy app. Note 'maintaining', as in not adding anything to it, just making sure it still works. If the app is still being added/changed/etc then part of the roadmap should be to remove jQ from the stack.