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

Question

我有一个名为Slicebox的幻灯片脚本，为了适应移动设备和桌面设备不同的图片大小，我需要在我的网站上拥有两个相同的功能副本。

虽然这样有点不方便，但我喜欢这个幻灯片，所以我想知道是否可以更有效地使用它...

我不想在页脚中有两个几乎相同的脚本副本...只有三行内容不同，我想看看是否可以将它们合并。

以下是脚本：

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

在最顶部有这段代码：

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

这里有三个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( {

- Matthew

Answer 1

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

但是，您也可以使用属性开始选择器，我完全从@Box9在此帖子中（Jquery find all ids starting with a string?）中盗用了它。

在您的情况下，它将看起来像：$('[id^="nav-arrows_"]').hide();

- clovola

---

这实际上非常酷，但不幸的是我不认为我能让它工作。 - Matthew

Answer 2

你可以使用 多重选择器（“选择器1，选择器2，选择器N”） 来组合两个或更多的选择器。

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

您可以指定任意数量的选择器组合成一个结果。这种多表达式组合器是选择不同元素的有效方法。返回的jQuery对象中DOM元素的顺序可能不完全相同，因为它们将按照文档顺序排列。这种组合器的替代方法是.add()方法。

- Adil

---

对我来说，这些都似乎不起作用，我无法弄清楚，但我可能会转向更有效的滑块，它更多地使用CSS而不是其他任何东西...我真正想做的就是允许在媒体宽度小于和大于40em（641px）时更改图像大小。 - Matthew

你能否用相关的HTML和JavaScript简要地创建一个示例，并告诉我其中的问题？ - Adil

我无法在jsfiddle中使其工作，但如果您想要尝试一下，这是插件的演示网址http://tympanus.net/Development/Slicebox/，而我现在正在处理的网站是http://mrobertsdesign.ca--您可以在主页上看到它，您可以检查元素并更改页面底部的脚本以了解我所说的内容！ - Matthew

我会将你的答案标记为正确，因为从技术上讲它应该是可行的...你回答了我的问题。只是无法与脚本配合使用。 - Matthew

如果您能提供一个简短的代码片段并解释您在其中想要实现什么，我可以尝试帮助您。 - Adil

Answer 3

正如 @Adil 回答的那样，

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

或者您可以创建一个变量来保存这些ID。就像这样：

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

你可以在代码中使用这个变量，但这不是一个优化的方法，你需要使用循环将所有ID存储到一个变量中。

$(idList).hide();

- Hardik Bharadava

---

我刚刚尝试了你上面写的类似的东西，但好像无法正常工作。不过，如果你想看一下，我在问题底部包含了我的代码！ - Matthew