Javascript jQuery：我可以在一个变量中指定多个ID吗？

我有一个名为Slicebox的滑块脚本，为了让我有两个不同大小的移动和桌面大小的图像，我需要在我的网站上有两个相同功能的副本

这是不方便的，但我喜欢滑块，所以我想看看我是否可以使这项工作更有效

我的页脚中没有两个几乎相同的脚本副本。。。我只有3行是不同的，我想看看我是否可以合并他们

以下是脚本：

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

有三个ID：

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

现在，我用-sm而不是-lg实现了相同的功能，我想知道我是否可以这样做：

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

有没有办法让变量同时包含这两个ID

我只是试着这么做： 我不知道如何让它工作，它可能只是脚本编写的方式-它可能无法处理这一点。我不确定

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

可以使用组合两个或多个选择器

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

您可以指定任意数量的选择器组合为一个选择器 后果这种多表达式组合器是一种有效的 选择不同的元素。中DOM元素的顺序 返回的jQuery对象可能不相同，因为它们将在 文件顺序。此组合符的另一种选择是.add 方法

正如@Adil所回答的那样

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

或者您可以创建变量来保存其中的ID。像这样的

var idList = "#nav-arrows-sm," + "#nav-arrows-lg," + "#SelectorN";

在代码中使用这个变量，但这不是一种优化的方法，需要一个循环来获取变量中的所有ID

$(idList).hide();

---

我认为@Adil的答案在这里可能是最好的，因为他提到你可以使用多个id选择器，只需要在几个地方更新你的代码

但是，您也可以使用 这是我在这篇文章的@Box9中看到的

---

在您的例子中，它看起来像：$'[id^=nav-arrows_u3;]'.hide

我只是试着做一些像你上面写的那样的事情，但我似乎无法让它工作，我在问题的底部包括了我所做的，不过如果你想看看的话！这真的很酷，我不认为我能让它工作，虽然不幸的是，其中一个似乎对我有效，我不知道，但我可能会移动到一个更有效的滑块，它比任何东西都更CSS。。。我真正想做的就是允许在媒体宽度小于或大于40em 641pxCan的情况下更改图像大小。你可以简单地修改一下相关的html和javascript，让我知道有什么问题，我无法让它在JSFIDLE中工作，如果你想搞乱它，这是插件的演示url，我现在正在搞乱的网站是-你会在主页上看到它，你可以检查元素并更改页面底部的脚本，看看我在说什么！我将把你的答案标记为正确，因为从技术上讲它应该是有效的。。。你确实回答了我的问题。只是不能让它和剧本一起工作。如果你做一个简短的提琴，并解释你想在那个提琴里演奏，我可以试着帮助你。

$(idList).hide();