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;