Currently, I am developing an application with six similar sections on the homepage. Although the app is functional, I find myself duplicating the following block of code:
The only variations between each section are the IDs: #grid and #close, as these IDs differ in each of the six sections.
I attempted to streamline this process by using the following lines:
var $grid = $( '#grid4', '#grid2', '#grid3' ..... ),
and
$close = $( '#close', '#close2', '#close3', .....),
However, this approach led to issues such as sections not loading correctly in the browser.
Below is the repeated block of code:
$(function() {
var $grid = $( '#grid' ),
$name = $( '.name' ),
$close = $( '#close' ),
$loader = $( '<div class="loader"><i></i><i></i><i></i><i></i><i></i><i></i><span>Loading...</span></div>' ).insertBefore( $grid ),
stapel = $grid.stapel( {
onLoad : function() {
$loader.remove();
},
onBeforeOpen : function( pileName ) {
$name.html( pileName );
},
onAfterOpen : function( pileName ) {
$close.show();
}
} );
$close.on( 'click', function() {
$close.hide();
$name.empty();
stapel.closePile();
} );
} );
I am seeking ways to enhance the code so that I can avoid repeating the same block while still maintaining distinct IDs for each section to ensure independent behavior. How can I achieve this without redundancy?