jQuery腳本僅需單擊即可很好地工作，不適用於keydown事件

Question

我是一名學習jQuery的設計師。 因此，請原諒我缺乏理解；）我正在嘗試將一種輪播形式的東西放在一起，其中一個主幻燈片可見，而另外兩個部分隱藏的幻燈片觸發下一個/上一個幻燈片動作。

我已經批准了這樣的主題：接收到上一個/下一個單擊時，部分可見的prev / next 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>

然后是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單擊相同的li.prev嗎？

謝謝！

Answer 1

您的問題是在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;
    }
});

因此，您僅使功能NEXT / PREV一次，然后按向左和向右箭頭時，將在正確的<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;