將jQuery隔離爲只包含元素

Question

我一直在尋找一段時間，而我只是用JQuery和JavaScript來弄清楚我的錯在哪裏。任何幫助將不勝感激。我有下面的腳本，這對一個元素很有用。我如何修改這個以處理多個元素？如果頁面上有多個元素，滑塊將滾動一切，而不僅僅是一個容器內的元素。我知道我可以在技術上爲每種方法創建新的變量和新的類名，但這很混亂，我知道必須有一個更聰明的方法。

<script type="text/javascript" charset="utf-8"> 
    window.onload = function() { 
     var container = $('div.sliderGallery'); 
     var ul = $('ul', container); 

     var itemsWidth = ul.innerWidth() - container.outerWidth(); 

     $('.slider', container).slider({ 
      min: 0, 
      max: itemsWidth, 
      handle: '.handle', 
      stop: function (event, ui) { 
       ul.animate({'left' : ui.value * -1}, 500); 
      }, 
      slide: function (event, ui) { 
       ul.css('left', ui.value * -1); 
      } 
     }); 
    }; 
</script> 

這裏是html。

<div class="sliderGallery"> 

    <ul id="audio-downloads"> 
    <li><a href="#">Audio Title</a></li> 
    <li><a href="#">Audio Title</a></li> 
    <li><a href="#">Audio Title</a></li> 
    <li><a href="#">Audio Title</a></li> 
    <li><a href="#">Audio Title</a></li> 
    <li><a href="#">Audio Title</a></li> 
    <li><a href="#">Audio Title</a></li> 
    <li><a href="#">Audio Title</a></li> 
    <li><a href="#">Audio Title</a></li> 
    </ul> 

    <div class="slider"> 
    <div class="handle"></div> 
    </div> 

</div> 

<div class="sliderGallery"> 

    <ul id="audio-downloads"> 
    <li><a href="#">Audio Title</a></li> 
    <li><a href="#">Audio Title</a></li> 
    <li><a href="#">Audio Title</a></li> 
    <li><a href="#">Audio Title</a></li> 
    <li><a href="#">Audio Title</a></li> 
    <li><a href="#">Audio Title</a></li> 
    <li><a href="#">Audio Title</a></li> 
    <li><a href="#">Audio Title</a></li> 
    <li><a href="#">Audio Title</a></li> 
    </ul> 

    <div class="slider"> 
    <div class="handle"></div> 
    </div> 

</div> 

Answer 1

更新也只是注意到你正在使用window.onload。在jQuery中，您應該使用$(document).ready()或其別名$(function())。

你只需要使用一個each()通過sliderGallery元素的集合運行：

$(function(){ // This replaces your window.onload function wrapper 
    $('div.sliderGallery').each(function(){ 
     var ul = $('ul', this); 

     var itemsWidth = ul.innerWidth() - $(this).outerWidth(); 

     $('.slider', this).slider({ 
      min: 0, 
      max: itemsWidth, 
      handle: '.handle', 
      stop: function (event, ui) { 
       ul.animate({'left' : ui.value * -1}, 500); 
      }, 
      slide: function (event, ui) { 
       ul.css('left', ui.value * -1); 
      } 
     }); 
    }); 
}) 

在each回調函數，this =當前DOM節點。如果你在上下文中需要它作爲jQuery對象，請使用$(this)。

Answer 2

嘗試是這樣的 - 這是你的代碼轉換爲可在負載腳本來選擇性地應用插件：

<script type="text/javascript" charset="utf-8"> 
    // This replaces window.load: 
    $(function() { 
     // Matches each slider gallery and applies one plugin to each. 
     $('.sliderGallery').sliderGallery(); 
    }); 

    // Your very own jQuery plugin 
    $.fn.sliderGallery = function() { 
     var container = $(this); // $(this) is the element you applied the plugin to. 
     var ul = $('ul', container); 

     var itemsWidth = ul.innerWidth() - container.outerWidth(); 

     $('.slider', container).slider({ 
      min: 0, 
      max: itemsWidth, 
      handle: '.handle', 
      stop: function (event, ui) { 
       ul.animate({'left' : ui.value * -1}, 500); 
      }, 
      slide: function (event, ui) { 
       ul.css('left', ui.value * -1); 
      } 
     }); 
    }; 
</script> 

希望這有助於。