jQuery: Can I specify multiple ID's in a variable?

Question

I have a script for a slider called Slicebox, and in order for me to have two different sizes of images for mobile and desktop size, I need to have 2 copies of the same feature on my website.

It's inconvenient but I like the slider so I want to see if I can make this work more efficiently...

Instead of having two, almost identical, copies of the same script in my footer... I only have 3 lines that are different and I want to see if I can merge 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 chunk 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 ID's:

 #nav-arrows-lg
 #nav-dots-lg
 #nav-slider-lg

Now I have the same with -sm instead of -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 those ID's?

---

I just tried doing this: I'm not sure how to get this working, it could just be the way the script is written -- it may not be able to handle this. 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( {

Answer 1

I think @Adil's answer might be the best here, as he mentioned you can use multiple id selectors which only requires you to update your code in a couple of places.

However, you could also use the attribute starts with selector which I totally ganked from @Box9 on this post(Jquery find all ids starting with a string?).

In your case it would look like: $('[id^="nav-arrows_"]').hide();

Answer 2

You can use Multiple Selector (“selector1, selector2, selectorN”) to combine two or more selector.

var $navArrows = $( "#nav-arrows-sm, #nav-arrows-lg" ).hide();

You can specify any number of selectors to combine into a single result. This multiple expression combinator is an efficient way to select disparate elements. The order of the 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.