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>

希望这有帮助。

将jQuery隔离到仅包含的元素

2 个答案: