Jquery隐藏功能有时不适用于幻灯片

Question

限制：仅限 HTML、Javascript (Jquery)

目标：可以使用左右箭头更改幻灯片的幻灯片。

代码示例 1（停止）：https://jsfiddle.net/Penguinlay/8syyktd4/1/

HTML

<div class="card">
  1
</div>

<div class="card">
  2
</div>

<div class="card">
  3
</div>

<div class="card">
  4
</div>

<div class="card">
  5
</div>

<div class="card">
  6
</div>

<div class="card">
  7
</div>

脚本 1

$(document).ready(function() {
  var totalCard, first, last, current, old;

  first = $(".card:first");
  last = $(".card:last");
  current = first;
  old = first;

  $(".card").not(current).hide();

  $(document).keydown(function(entry) {
    old = current;

    if(entry.keyCode == 37) {
      if(old == first)
        current = first;
      else
        current = old.prev();
    }

    if(entry.keyCode == 39) {
      if(old == last)
        current = last;
      else
        current = old.next();
    }
    $(".card").hide();
    current.toggle();
  });
});

代码示例 2（循环）：https://jsfiddle.net/Penguinlay/8syyktd4/3/

与上面相同的 HTML。

脚本 2

$(document).ready(function() {
  var first, prev, current, next, last;

  first = $(".card:first");
  last = $(".card:last");
  prev = last;
  current = first;
  next = first.next();

  $(".card").not(first).hide();

  $(document).keydown(function(e) {
    if(e.keyCode == 37) {
      next = current;
      current = prev;
      if(current == first)
        prev = last;
      else
        prev = current.prev();
      $(next).fadeOut(1);
    }

    if(e.keyCode == 39) {
      prev = current;
      if(current == last)
        current = first;
      else
        current = next;
      next = current.next();
      $(prev).fadeOut(1);
    }

    $(current).fadeIn(100);
  });
});

问题：

在示例 1 中，单击左箭头时幻灯片应停止在幻灯片 1 上。它在运行时正常工作，但在访问其他幻灯片并返回到幻灯片 1 后，左箭头单击幻灯片 1 不会停止，而是给我白屏。

所以，我在示例 2 中尝试了一个稍微不同的脚本，其中左箭头单击幻灯片 1 将我带到最后一张幻灯片。同样，它在运行时正常工作，但在访问其他幻灯片并返回幻灯片 1 后，左箭头单击幻灯片 1 不会转到最后一张幻灯片，而是给我白屏。

它也不适用于右箭头。与上述完全相同的问题。

它不适用于最新版本的 Chrome、Firefox、Firefox Dev Edition、Microsoft Edge 和 JSFiddle。

我应该怎么做才能按预期工作（分别在幻灯片 1 上停止或转到最后一张幻灯片）？

Answer 1

如果您使用 Jquery 1.6 及更高版本：

样本 1：

$(document).ready(function() {
  var totalCard, first, last, current, old;

  first = $(".card:first");
  last = $(".card:last");
  current = first;

  $(".card").not(current).hide();

  $(document).keydown(function(entry) {

    if(entry.keyCode == 37) {
     if(!current.is(first))
       current = current.prev();
    }

    if(entry.keyCode == 39) {
      if(!current.is(last))
        current = current.next();
    }

    $(".card").hide();
    current.toggle();

  });
});

示例 2：

$(document).ready(function() {
  var totalCard, first, last, current, old;

  first = $(".card:first");
  last = $(".card:last");
  current = first;

  $(".card").not(current).hide();

  $(document).keydown(function(entry) {

    if(entry.keyCode == 37) {
          if(current.is(first)){
            current = last;
           }else{
            current = current.prev();
          }
    }

    if(entry.keyCode == 39) {
       if(current.is(last)){ 
         current = first;
       }else{
        current = current.next();
       }
    }

    $(".card").hide();
    current.toggle();

  });
});

每当你调用 $(".card:first") 时，你实际上是在做一个返回一个新对象的 jQuery(".card:first")。所以比较它们并期望相同的对象是不正确的。

参考：jQuery object equality