Question

我有一个名为Slicebox的滑块脚本，为了让我有两种不同尺寸的图像用于手机和桌面尺寸，我需要在我的网站上拥有2份相同功能的副本。

不方便，但我喜欢滑块，所以我想看看能否更有效地完成这项工作......

而不是在我的页脚中有相同脚本的两个，几乎相同的副本...我只有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>

在最顶端有一大堆代码：

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

Answer 1

您可以使用Multiple Selector (“selector1, selector2, selectorN”)组合两个或更多选择器。

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

您可以指定任意数量的选择器组合成一个结果。这种多表达组合子是一种有效的方法选择不同的元素。中的DOM元素的顺序返回的jQuery对象可能不一样，因为它们将在文件订单。这个组合子的替代方法是.add（）方法

Answer 2

@Adil回答，

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

或者您可以创建变量以在其中保存此ID。这样的事情。

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

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

$(idList).hide();

Answer 3

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

但是，您也可以使用attribute starts with selector 我在这篇文章（Jquery find all ids starting with a string?）上完全从@ Box9中掏出来。

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

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

3 个答案: