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

希望这会有所帮助。