Question

在一些帮助下，我得到了一些JavaScript工作。它看起来像：

<script>
  $(document).ready(function() {
    var $li = $('.eo-events li');

    $li.hide().filter(':lt(6)').show()

    var x = 6;

    $('#next, #prev').click(function() {
      var m = this.id === 'prev' ? 'first' : 'last';
      var $m = $li.filter(':visible')[m]()[this.id + 'All'](":lt(" + x + ")");
      if ($m.length == 0) return;

      var time = 250;

      $li.fadeOut(time);
      setTimeout(function() {
        $m.fadeIn(time);
      }, time);
    });
  });
</script>

这样做是采取一组列表项并导航每5个列表项。

这很好用，但是我想按原样使用它，然后在其他地方使用，这可能吗？我尝试添加另一个看起来像这样的脚本调用。顶部函数仅显示一定数量的项目，但next和prev箭头根本不起作用。即使第二次调用脚本，原始的列表项仍然很有效，但我不确定为什么第二组next和prev箭头不起作用。

<script>
  $(document).ready(function() {
    var $li = $('.new-list li');

    $li.hide().filter(':lt(1)').show()

    var x = 1;

    $('#next1, #prev1').click(function() {
      var m = this.id === 'prev1' ? 'first' : 'last';
      var $m = $li.filter(':visible')[m]()[this.id + 'All'](":lt(" + x + ")");

      if ($m.length == 0) return;

      var time = 250;

      $li.fadeOut(time);
      setTimeout(function() {
        $m.fadeIn(time);
      }, time);
    });
  });
</script>

我想我需要更改变量名称。我尝试将x更改为y，将m更改为n，将$li更改为$item，但它无效。我知道这可能是一个简单的调整，任何想法？

Answer 1

你复习了这一行：

var $m = $li.filter(':visible')[m]()[this.id + 'All'](":lt(" + x + ")");

难以发现问题

您似乎想要链接方法nextAll()或prevAll()，但由于您在第二个实例中使用的ID最后会有1，因此您最终会next1All() 1}}或prev1All()。这些应该是抛出错误，指示方法不存在

如何在页面上两次使用此JavaScript代码段？

1 个答案: