jQuery腳本非常適合單擊，不支持keydown事件

Question

我是一名學習jQuery的設計師。所以請原諒我缺乏理解;）我試圖把一個旋轉木馬類的東西放在一個可見的主要幻燈片上，另外兩個部分隱藏的幻燈片觸發下一個/上一個幻燈片動作。

我已經討論過這樣的話題：當接收到prev/next點擊時，部分可見的prev/next li重新排列ul，使得ul的最後一個是第一個，反之亦然，用CSS動畫。我已經能夠正確響應li.next/li.prev點擊，但是當我嘗試以相同的方式響應左/右鍵時 - 它不起作用。

這裏的HTML：

<ul> 
    <li class="prev" data-id="1"> 

    </li><!-- 
    --><li class="main" data-id="2"> 

    </li><!-- 
    --><li class="next" data-id="3"> 

    </li><!-- 
    --><li data-id="4"> 

    </li><!-- 
    --><li data-id="5"> 

    </li> 
</ul> 

然後CSS（我知道這是缺乏包裝溢出：隱藏DIV，去除它的清晰度）：

ul { 
    list-style-type: none; 
    display: block; 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    white-space: nowrap; 
    position: absolute; 
    bottom: 0; 
} 

ul li { 
    position: relative; 
    display: inline-block; 
    width: 100%; 
    height: 95%; 
    margin: 0; 
    padding: 0; 
    -webkit-transition: all 0.5s ease-out; 
    transition: all 0.5s ease-out; 
    white-space: normal; 
    background: #eee; 
    cursor: pointer; 
} 

ul li.main { 
    height: 80%; 
    width: 70%; 
    margin: 0 15%; 
    z-index: 4; 
} 

ul li.prev { 
    height: 75%; 
    margin: 0 -8% 0.5% -92%; 
    z-index: 1; 
} 

ul li.next { 
    height: 75%; 
    margin: 0 0 0.5% -8%; 
    z-index: 1; 
} 

而現在的半工作腳本：

//this works great 

    $('body').on('click', 'li.prev', function() { 
     $("body").find("li").eq(2).removeClass("next"); 
      $(this).next().removeClass().addClass("next"); 
      $(this).removeClass("prev").addClass("main"); 
      $(this).prev().removeClass().addClass("prev"); 

      var $this = $(this), callback = function() {   
$this.siblings(':last()').insertBefore($this).addClass("prev"); 
        }; 
       $this.fadeIn(100, callback).fadeIn(100); 
      }); 

      $('body').on('click', 'li.next', function() { 
       $("body").find("li").eq(0).removeClass(); 
       $(this).prev().removeClass().addClass("prev"); 
       $(this).removeClass().addClass("main"); 
       $(this).next().removeClass().addClass("next"); 

       var $this = $(this), callback = function() {    
$this.siblings(':first()').insertAfter($this.siblings(':last()')); 
        }; 
        $this.fadeIn(100, callback).fadeIn(100); 
       }); 



    // now the left-right keys control attempt 

    $(document).keydown(function(e) { 
     switch(e.which) { 

      case 37: // key right 
       $("body").find("ul li").eq(2).removeClass("next"); 
       $("li.prev").next().removeClass().addClass("next"); 
       $("li.prev").removeClass("prev").addClass("main"); 
       $("li.prev").prev().removeClass().addClass("prev"); 

       var $this = $("li.prev"), callback = function() {  
        $this.siblings(':first()').insertAfter($this.siblings(':last()')); 
        }; 
        $this.fadeIn(100, callback).fadeIn(100); 
       break; 


      case 39: // key left 
       $(".body").find(".view ul li").eq(0).removeClass(); 
       $("li.next").prev().removeClass().addClass("prev"); 
       $("li.next").removeClass().addClass("main"); 
       $("li.next").next().removeClass().addClass("next"); 

       var $this = $("li.next"), callback = function() {  $this.siblings(':first()').insertAfter($this.siblings(':last()')); 
        }; 
        $this.fadeIn(100, callback).fadeIn(100); 
      break; 

      default: return; 
     } 
    }); 

這裏，它是放在一起的小提琴：

https://jsfiddle.net/nfp828yc/

能否請你幫助我，並告訴我的我失蹤使左/右按鍵做的li.prev/li.next點擊一樣嗎？

一個hughe謝謝！

Answer 1

你的問題是，在keydown函數中，你有一個未聲明的$this，因爲你不在範圍內。最簡單的方法是在keydown時觸發點擊。看看這個：

$(document).keydown(function(e) { 
    switch(e.which) { 

     case 37: // key right 
       $('li.next').trigger('click'); 
      break; 


     case 39: // key left 
       $('li.prev').trigger('click'); 
     break; 

     default: return; 
    } 
}); 

所以，你可以將這個功能，一個/上只有一次，然後當你按下左右鍵箭頭，點擊會在正確的<li>

觸發看到它工作：

https://jsfiddle.net/nfp828yc/4/

Answer 2

擊中鍵時，就觸發點擊：

case 37: // key right 
    $('li.prev').trigger('click'); 
    break; 

case 39: // key left 
    $('li.next').trigger('click'); 
    break;