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( {

Community · Accepted Answer · 2017-05-23 10:26:54Z

2

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();

edited May 23, 2017 at 10:26

CommunityBot

11 silver badge

answered May 19, 2015 at 5:39

clovola

3781 silver badge14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matthew Over a year ago

This is actually really cool, I don't think I'm going to be able to get this to work though unfortunately

Adil · Accepted Answer · 2015-05-19 05:22:55Z

1

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.

answered May 19, 2015 at 5:22

Adil

148k25 gold badges217 silver badges207 bronze badges

5 Comments

Matthew Over a year ago

None of this seems to be working for me, I can't figure it out, but I may move to a more efficient slider that's more CSS than anything... all I really am trying to do is allow the image sizes to be changed on media width less than and more than 40em (641px)

Adil Over a year ago

Can you make a brief fiddle with related html and javascript and let me know what is problem with that

Matthew Over a year ago

I can't get it to work in jsfiddle, any way if you wanna mess around with it this is the demo url for the plugin tympanus.net/Development/Slicebox and the site that I'm messing with right now is mrobertsdesign.ca -- you'll see it right there at the homepage, you can inspect element and change the script at the bottom of the page to see what I'm talking about!

Matthew Over a year ago

I'm going to mark your answer as correct because it should technically work... you did answer my question. Just can't get it to work with the script.

Adil Over a year ago

I can try to help you if you make brief fiddle and explain that you want in that fiddle.

Hardik Bharadava · Accepted Answer · 2015-05-19 05:28:31Z

1

As @Adil answered,

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

or You can create your Variable to hold this IDs in it. Something like this.

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 those all IDs in a Variable.

$(idList).hide();

answered May 19, 2015 at 5:28

Hardik Bharadava

4721 gold badge10 silver badges22 bronze badges

1 Comment

Matthew Over a year ago

I just tried doing something like what you've written above and I can't seem to get this working, I included what I did at the bottom of the question though if you want to take a look!

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related