如何正确维护 JQuery Counter 中的索引？答案

【问题标题】：How to properly maintain the index in a JQuery Counter?如何正确维护 JQuery Counter 中的索引？
【发布时间】：2013-01-08 04:40:56
【问题描述】：

假设我有五个 div。我正在尝试显示前 3 个 div，然后显示一个新 div 并在设定的时间间隔内删除一个 div。

这是我的 HTML 代码：

<div class="speaker">One</div>
<div class="speaker">Two</div>
<div class="speaker">Three</div>
<div class="speaker">Four</div>
<div class="speaker">Five</div>

JS Demo 在这里http://jsfiddle.net/mirzar/Sny3e/8/。

知道我在不保留当前索引方面做错了什么吗？一旦它显示了第五个扬声器，我正在尝试迭代从“三四五”到“二三四”，然后是“一二三”，然后从头开始

【问题讨论】：

标签： javascript jquery indexing

【解决方案1】：

我分叉了你的小提琴并尽量不修改。我设置了一个标志来检查我们向上或向下的方向。当我们返回索引时，我们检查是否再次回到 0，如果是，我们将所有索引位置重置为默认值。

当您使用当前索引作为每次通过的条件时，最终会发生的情况是，它会在通过和失败之间来回摇摆。这就是为什么最好设置一个“标志”变量来指示应该运行哪组语句。

var speakers = $(".speaker").length;
var currIndex = 0;
var endIndex = 0;
var reverseIndex = 0;
var up = true;

if (speakers > 3) {
   $(".speaker").hide();
   $('.speaker:lt(3)').show();
   var refreshId = setInterval(speaker_slides, 2000);
}

function speaker_slides() {

  if (up) {
    endIndex = currIndex + 3;
    $(".speaker").eq(currIndex).hide(500);
    $(".speaker").eq(endIndex).delay(500).show(500);
    currIndex++;
    $("#currIn").empty().append(currIndex);
    up = currIndex >= 2 ? false : true;
  } else {
    currIndex--;
    endIndex = currIndex;
    reverseIndex--;
    $(".speaker").eq(reverseIndex).hide(500);
    $(".speaker").eq(endIndex).delay(500).show(500);
    if(currIndex == 0) {
      up = true;
      endIndex = 0;
      reverseIndex = 0;
    }
  }

}

这可以清理很多，但我认为它正在按照您最初的意图工作。

希望对你有帮助

http://jsfiddle.net/ZjcYd/

【讨论】：

谢谢。非常。你的工作正常。我需要稍微修改一下，以便 up 变量不是由硬编码的数字设置的。这是我的叉子jsfiddle.net/mirzar/Ezan5/1

【解决方案2】：

我分叉了你的 jsfiddle 并尝试以我的方式进行修改：

http://jsfiddle.net/dharmavir/74KQc/

$(document).ready(function(){
  var slides = $(".speaker").length;
  $.each( $(".speaker"), function(index, node) {
    $(node).data("rank", index+1);
  });
  $(".speaker").hide();
  setInterval(slideRoller, 2000);
});

function slideRoller()
{
  rollSlides("container", "slides", "speaker", 1, 5, 3);
}

function rollSlides(containerDisplay, containerParent, elmSetClass, startIndex, endIndex, displayLimit)
{
  $("#"+containerDisplay).empty();
  $.each( $("."+elmSetClass), function() {
    var rank = $(this).data("rank");

    if( rank <= displayLimit )
    {
      $(this).clone().show().appendTo("#"+containerDisplay);
    }
    else
    {
      $(this).hide().appendTo("#"+containerParent);
    }
    if( rank <= startIndex )
    {
      rank = endIndex;
    }
    else 
    {
      rank = rank - 1;
    }
    $(this).data("rank", rank);
  });
}

【讨论】：

在这里分叉你的 - jsfiddle.net/mirzar/2Q3mN。喜欢你的解决方案。唯一的缺点是它不能做淡入淡出或向上/向下滑动，因为你显示/隐藏了整个东西

【解决方案3】：

我知道您有答案，但您可能对更通用、更紧凑的解决方案感兴趣：

  var $speakers = $(".speaker");
  var dims = {
    length: $speakers.length,
    batch: 3
  };
  var i = 0; //currIndex
  var dir = 1; //direction
  var offset = {};

  if (dims.length > dims.batch) {
    $speakers.hide();
    $('.speaker:lt(' + dims.batch + ')').show();
    var refreshId = setInterval(speaker_slides, 2000);
  }

  function speaker_slides() {
    i = i + dir;
    $("#currIn").text(i);
    offset.h = (dir == 1) ? -1 : dims.batch;
    offset.s = (dir == 1) ? dims.batch - 1 : 0;
    $speakers.eq(i + offset.h).hide(500);
    $speakers.eq(i + offset.s).delay(500).show(500);
    dir = (i <= 0) ? 1 : (i >= dims.length - dims.batch) ? -1 : dir;
  }

DEMO

所有的常量都派生自dims.length和dims.batch。

对于不同的行为，只需将dims.batch 更改为 1、2 或 4。

【讨论】：