Isoler jQuery à seulement des éléments contenus

Question

Je cherchais depuis longtemps, et je suis juste trop nouveau avec JQuery et javascript pour savoir où je vais mal. Toute aide est la bienvenue. J'ai le script ci-dessous, qui fonctionne très bien pour un élément. Comment puis-je modifier cela pour travailler avec plusieurs éléments? Si j'ai plusieurs éléments sur la page, le curseur fera défiler tout, pas seulement les éléments dans le conteneur. Je sais que techniquement, je pourrais juste faire de nouvelles variables et de nouveaux noms de classe pour chaque méthode, mais c'est désordonné et je sais qu'il doit y avoir un moyen plus intelligent.

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

Et voici le code 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

Mise à jourVous venez d'ailleurs de remarquer que vous utilisez window.onload. Dans jQuery, vous devez utiliser $(document).ready() ou son alias $(function()).

Vous avez juste besoin d'utiliser un each() à courir à travers la collection de sliderGallery éléments:

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

Dans la fonction de rappel each, this = le nœud DOM actuel. Si vous en avez besoin en tant qu'objet jQuery dans ce contexte, utilisez $(this).

Answer 2

Essayez quelque chose comme ça - ce convertit votre code dans un plug-in qui peut être appliquée de manière sélective dans le script de charge:

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

Hope this helps.