javascript - 按键时获取当前div的id

Question

我的 HTML 文档中有 3 个 div 部分，每当按键时我都会尝试在彼此之间切换。这个想法是，当发生按键事件时，我得到当前 div 的 id 并根据该 id，我淡入右侧 div(如果是 div 1，则淡入 div 2，等等)。

我的 HTML 代码如下:

<div id="home" class="current">
        <p align="center">Home</p>
        <p align="center">
           Some content
        </p>
    </div>
    <div id="about">
        <p align="center">About</p>
        <p align="center">
           Some content 
        </p>
    </div>
    <div id="contact">
        <p align="center">Contact Form</p>
        <p align="center">
            Some content
        </p>
    </div>

jQuery 代码:

<script>
$("#target").keypress(function(){

        var id = $(this).html().toLowerCase();
          console.log('id is: '+id);    
        $('.current').fadeOut(900, function(){
            $('#'+id).fadeIn(900);
            $('.current').removeClass('current');
            $('#'+id).addClass('current');

        });

    });
</script>
​

上面的代码不起作用，我是 jQuery 事件的新手，请您指导我正确的方法。

Answer 1

改用 keyup 和 .val。

$("#target").keyup(function(){

    var id = $(this).val().toLowerCase();
    $('.current').removeClass('current').fadeOut(900, function(){
        $('#'+id).fadeIn(900).addClass('current');
    });

});