Javascript jQuery脚本只需点击一下就可以很好地工作，不是吗'；无法使用按键关闭事件

我是一名学习jQuery的设计师。所以请原谅我的不理解；）我正在尝试将一张主幻灯片和另外两张部分隐藏的幻灯片放在一起，以触发下一张/上一张幻灯片的动作

我对这个主题的理解是这样的：部分可见的上一个/下一个li在收到上一个/下一个单击时重新排列ul，使ul的最后一个li成为第一个，反之亦然，并使用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>

现在是半工作脚本：

    //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;
        }
    });

在这里，它被放在小提琴上：

请您帮助我，告诉我我缺少了什么，可以使左/右键与

li.prev

/

li.next

单击执行相同的操作

---

A休斯谢谢

您的问题是，在keydown函数中，您有一个未声明的

$this

，因为您不在范围内。最简单的方法是在按下键时触发单击。看看这个：

$(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;
    }
});

因此，您只需执行一次“下一步/上一步”功能，然后当您按左右键箭头时，将在正确的

看到它工作了吗

---

您的问题是，在按键功能中，您有一个未声明的

$this

，因为您不在范围内。最简单的方法是在按下键时触发单击。看看这个：

$(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;
    }
});

因此，您只需执行一次“下一步/上一步”功能，然后当您按左右键箭头时，将在正确的

看到它工作了吗

---

只要在按键时触发点击：

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

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

---

只需在击键时触发单击：

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

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

---

首先，

e.包含哪些内容？里面有钥匙吗？另外，它是否包含您正在使用的键的正确值？首先，
e.which
包含什么？里面有钥匙吗？另外，它是否包含您正在使用的键的正确值？什么？我不明白你的评论@AnoopJoshi:（实际上我正要发布相同的答案。但后来我注意到，你已经在40秒前发布了答案。。伙计们，非常感谢@Marcos，还有Anoop。这太棒了，我不知道你可以这样做（我正在开始这个jQuery冒险；），现在我知道了，我是一个更好的人：）)谢谢大家!！啊，好的！LOL对不起，因为我比xD快。请注意，我有时间拒绝不相关的编辑，阅读所有代码，识别问题，拨弄小提琴并写出答案，所以这是旧西部的更快；）祝你下次好运time@Marcos谢谢你给小费！我永远不会滥用它；）干杯什么？我不明白你的评论@AnoopJoshi:（实际上我正要发布相同的答案。但后来我注意到，你已经在40秒前发布了答案。。伙计们，非常感谢@Marcos，还有Anoop。这太棒了，我不知道你可以这样做（我正在开始这个jQuery冒险；），现在我知道了，我是一个更好的人：）)谢谢大家!！啊，好的！LOL对不起，因为我比xD快。请注意，我有时间拒绝不相关的编辑，阅读所有代码，识别问题，拨弄小提琴并写出答案，所以这是旧西部的更快；）祝你下次好运time@Marcos谢谢你给小费！我永远不会滥用它；）干杯