Question

我正在尝试使用jquery构建一个简单的菜单，它将无法正常工作。我在尝试获取NaN的ID和类时遇到this错误。有问题的元素既有id又有类。发生了什么事？

   $(document).on("click", function()
    {
        if($(this).attr("class") != "userOptButtons" && $(this).attr("id") != "usernameDisplay")
            $("#userMenu").animate({"top": "-198"});
    });

Answer 1

因为this引用了文档对象，如果要定位单击的实际元素，请使用event.target

$(document).on("click", function (e) {
    if (!$(e.target).hasClass("userOptButtons") && e.target.id != "usernameDisplay") {
        $("#userMenu").animate({
            "top": "-198"
        });
    }
});

Answer 2

$（this）引用“document”，即整个DOM，而不是你点击的菜单项。

除非您想在单个事件处理程序中处理DOM中任何内容的点击，否则您最好只为菜单使用事件处理程序。假设菜单中的每个项目都有相同的类名“menuitem”，那么你可以这样做：

$('.menuitem').on('click', function (e) {
    // now you can use $(this) in here to reference the item clicked
    // plus everything else here can be custom just for your menus
}

如果您要使用单个处理程序，如现有代码所示，则需要引用单击的项目，而不是使用$（this）：

$(e.target)

有关详细信息，请参阅http://api.jquery.com/event.target/。

Answer 3

您也可以使用此语法这将on click事件仅添加到id为“usernameDisplay”的DOM对象和一个“userOptButtons”类

$("#usernameDisplay .userOptButtons").on("click", function () {
        $("#userMenu").animate({
            "top": "-198"
        });   
});

为什么jquery“this”属性返回null？

3 个答案: