破坏keydown事件

Question

请告诉我当上一个keydown(evt.which == 40)上课<li>时，如何关闭或销毁.selected个活动？反之亦然，当第一个keydown(evt.which == 38)有类<li>时，销毁.selected事件。

这是JSFiddle

Answer 1

一种简单的方法是使用first()（或last()）并检查是否hasClass('selected')。以下是：

if (evt.which == 38) { //key up
    if (!$('#channels li').first().hasClass('selected')) {
        $('.selected').removeClass(function () {
            $(this).prev().addClass('selected');
            return 'selected';
        });
    }
}

Fiddle

＆＃13;

＆＃13;

$(window).keydown(function (evt) {
    if (evt.which == 40) { //key down
        if (!$('#channels li').last().hasClass('selected')) {
            $('.selected').removeClass(function () {
                $(this).next().addClass('selected');
                return 'selected';
            });
        }
    }
    if (evt.which == 38) { //key up
        if (!$('#channels li').first().hasClass('selected')) {
            $('.selected').removeClass(function () {
                $(this).prev().addClass('selected');
                return 'selected';
            });
        }
    }
});

＆＃13;

nav {
    position:fixed;
    height:auto;
    width:50%;
    background: #212121;
    font-family:sans-serif;
}
nav ul {
    margin:0;
    padding:0;
}
nav ul li {
    list-style-type:none;
    font-size: 20px;
    border-bottom: 1px solid #424242;
    color: white;
    transition:0.1s;
}
nav ul li:last-child {
    border-bottom: none;
}
nav ul li span {
    background-color: #4CAF50;
    padding: 6.3% 0;
    margin-right: 5%;
    width: 21%;
    display: inline-block;
    text-align: center;
    transition:0.1s;
}
nav ul li.selected {
    background: #424242;
}
nav ul li.selected span {
    color: #4CAF50;
    background-color: white;
}

＆＃13;

<nav>
    <ul id="channels">
        <li class="selected"><span>1</span>BBC</li>
        <li><span>2</span>CNN</li>
        <li><span>3</span>Cartoon Network</li>
        <li><span>4</span>12 TV</li>
    </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您不需要关闭或销毁此事件。您可以检查班级中的最后一项，如果是，则不做任何事情：

if (evt.which == 40) { //key down
    if($("#channels li:last-child").hasClass('selected')) return false;
    $('.selected').removeClass(function(){
        $(this).next().addClass('selected');
        return 'selected';
    });
}

同样的概念适用于密钥启动事件，但您可以使用first-child。