jQuery的隱藏功能有時不爲幻燈片

Question

工作

限制：只有HTML，Java腳本（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(); 

    }); 
}); 

當你調用$（ 「牌：第一」）你是實際上做了一個返回一個新對象的jQuery（「。card：first」）。因此，比較它們並期待相同的對象是不正確的。

對於ref：jQuery object equality