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