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

Question

我有一个名为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> 

在最上方有这个区块的代码：

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

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

Answer 2

由于@Adil回答，

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

，或者可以创建你的变量在其担任此标识。像这样的东西。

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

，并在代码中使用这个变量，但是这不是最优化的方式，你需要一个循环让那些所有ID在一个变量。

$(idList).hide(); 

Answer 3

我觉得@阿迪尔的回答可能是这里最好的，因为他提到了你可以使用多个ID选择只需要你在几个地方来更新你的代码。

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

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