jquery:单击并使用keydown移动选定的div

时间:2013-12-30 08:41:26

标签: jquery

当我点击'div'时,我能够获得'div'的属性。但是我无法将属性传递给第二部分,即键盘事件。

我可以知道如何移动我点击Keydown的'div'吗?

$(document).ready(function() {
    $("div").click(function() {
        getClass = "'."+this.className+"'";
        //alert(getClass);
        $(document).keydown(function(key) {
            switch (parseInt(key.which, 10)) {
                case 65:
                    $(getClass).animate({left: "-=10px"}, 'fast');
                    //alert(getClass);
                    break;
                case 83:
                    $(getClass).animate({top: "+=10px"}, 'fast');
                    break;
                case 87:
                    $(getClass).animate({top: "-=10px"}, 'fast');
                    break;
                case 68:
                    $(getClass).animate({left: "+=10px"}, 'fast');
                    break;
                default:
                break;
            }
        });
    });
});

提前感谢你善良的灵魂。

1 个答案:

答案 0 :(得分:0)

你的逻辑是完美的。我做的很少变化,对我有用

$("div").click(function() {
    getClass = "."+this.className+"";
    //alert(getClass);
    $(document).keydown(function(event) {
        var charCode = (event.which) ? event.which : event.keyCode;
        switch (charCode) {
            case 37:
                $(getClass).animate({left: "-=10px"}, 'fast');
                break;
            case 38:
                $(getClass).animate({top: "-=10px"}, 'fast');
                break;
            case 39:
                $(getClass).animate({left: "+=10px"}, 'fast');
                break;
            case 40:
                $(getClass).animate({top: "+=10px"}, 'fast');
                break;
            default:

            break;
        }
    });
});

我所做的改变。

1)从this.className

中删除引号

2)使用event而不是key(可选)

3)箭头键的键码与您指定的不同。

给你css给你看看它是否有效

<style>
    div{
        padding:2px;
        border:2px;
        background: #eee;
        top:10px;
        left:10px;
        position: relative;
    }
</style>