JQuery: Is it possible to specify multiple IDs in a variable?
I have a script for a slider called Slicebox, and in order for me to have two different image sizes for mobile and desktop, I need to have 2 copies of the same function on my site.
It's awkward, but I like the slider, so I want to see if I can make this work more efficiently ...
Instead of two, almost identical copies of the same script in my footer ... I only have 3 lines that are different from each other and I want to see if I can combine them.
Here is the script:
<script type="text/javascript">
$(function() {
var Page = (function() {
var $navArrows = $( "#nav-arrows-sm" ).hide(),
$navDots = $( "#nav-dots-sm" ).hide(),
$nav = $navDots.children( "span" ),
$navFirst = $navDots.children( "span:first-child" ),
slicebox = $( "#sb-slider-sm" ).slicebox( {
onReady : function() {
$navArrows.show();
$navDots.show();
$navFirst.addClass( "nav-dot-current" );
},
onBeforeChange : function( pos ) {
$nav.removeClass( "nav-dot-current" );
$nav.eq( pos ).addClass( "nav-dot-current" );
},
colorHiddenSides : "#444",
autoplay : true,
interval: 7000,
easing : "ease",
disperseFactor : 30
} ),
init = function() {
initEvents();
},
initEvents = function() {
$navArrows.children( ":first" ).on( "click", function() {
slicebox.next();
return false;
} );
$navArrows.children( ":last" ).on( "click", function() {
slicebox.previous();
return false;
} );
$nav.each( function( i ) {
$( this ).on( "click", function( event ) {
var $dot = $( this );
if( !slicebox.isActive() ) {
$nav.removeClass( "nav-dot-current" );
$dot.addClass( "nav-dot-current" );
}
slicebox.jump( i + 1 );
return false;
} );
} );
};
return { init : init };
})();
Page.init();
});
</script>
<script type="text/javascript">
$(function() {
var Page = (function() {
var $navArrows = $( "#nav-arrows-lg" ).hide(),
$navDots = $( "#nav-dots-lg" ).hide(),
$nav = $navDots.children( "span" ),
$navFirst = $navDots.children( "span:first-child" ),
slicebox = $( "#sb-slider-lg" ).slicebox( {
onReady : function() {
$navArrows.show();
$navDots.show();
$navFirst.addClass( "nav-dot-current" );
},
onBeforeChange : function( pos ) {
$nav.removeClass( "nav-dot-current" );
$nav.eq( pos ).addClass( "nav-dot-current" );
},
colorHiddenSides : "#444",
autoplay : true,
interval: 7000,
easing : "ease",
disperseFactor : 30
} ),
init = function() {
initEvents();
},
initEvents = function() {
$navArrows.children( ":first" ).on( "click", function() {
slicebox.next();
return false;
} );
$navArrows.children( ":last" ).on( "click", function() {
slicebox.previous();
return false;
} );
$nav.each( function( i ) {
$( this ).on( "click", function( event ) {
var $dot = $( this );
if( !slicebox.isActive() ) {
$nav.removeClass( "nav-dot-current" );
$dot.addClass( "nav-dot-current" );
}
slicebox.jump( i + 1 );
return false;
} );
} );
};
return { init : init };
})();
Page.init();
});
</script>
At the very top there is this piece of code:
var $navArrows = $( "#nav-arrows-lg" ).hide(),
$navDots = $( "#nav-dots-lg" ).hide(),
$nav = $navDots.children( "span" ),
$navFirst = $navDots.children( "span:first-child" ),
slicebox = $( "#sb-slider-lg" ).slicebox( {
There are three identifiers:
#nav-arrows-lg
#nav-dots-lg
#nav-slider-lg
Now I have the same thing with -sm
instead -lg
and I want to know if I can do something like this:
var $navArrows = $( "#nav-arrows-sm" + "#nav-arrows-lg" ).hide(),
$navDots = $( "#nav-dots-sm" + "#nav-dots-lg" ).hide(),
$nav = $navDots.children( "span" ),
$navFirst = $navDots.children( "span:first-child" ),
slicebox = $( "#sb-slider-sm" + "#sb-slider-lg" ).slicebox( {
Is there a way for the variable to include both of these IDs?
I just tried to do this: I'm not sure how to do it, maybe this is the way the script is written - maybe it won't handle it. I'm not sure.
var navArrowsList = "#nav-arrows-sm," + "#nav-arrows-lg";
var navDotsList = "#nav-dots-sm," + "#nav-dots-lg";
var navSliderList = "#sb-slider-sm," + "#sb-slider-lg";
var $navArrows = $(navArrowsList).hide(),
$navDots = $(navDotsList).hide(),
$nav = $navDots.children( "span" ),
$navFirst = $navDots.children( "span:first-child" ),
slicebox = $(navSliderList).slicebox( {
source to share
You can use Multiple Selector ("selector1, selector2, selectorN") to combine two or more selectors.
var $navArrows = $( "#nav-arrows-sm, #nav-arrows-lg" ).hide();
You can specify any number of selectors to combine into one result. This multiple expression combinator is an efficient way to select disparate items. The order of DOM elements in the returned jQuery object may not be identical as they will be in document order. An alternative to this combinator is the .add () method.
source to share
As @Adil answered,
var $navArrows = $( "#nav-arrows-sm, #nav-arrows-lg" ).hide();
or you can create a variable to store these IDs. Something like that.
var idList = "#nav-arrows-sm," + "#nav-arrows-lg," + "#SelectorN";
and use this variable in your code, but this is not an optimized way, you need a loop to get all these IDs in a variable.
$(idList).hide();
source to share
I think @ Adil's answer might be the best one here, as he mentioned that you can use multiple id selectors which require you to update your code in multiple places.
However, you can also use the attribute with selector which I have completely avoided @ Box9 in this post ( JQuery find all ids starting with a string? ).
In your case, it will look like this: $('[id^="nav-arrows_"]').hide();
source to share