Question

在下面链接的小提琴中，我需要解决一些示例代码。为了演示目的，我已经简化了原始代码（没有写入）。

$(document).ready(function(){
    $("ul").children().each(function(i){
        $(this).click(function(){
            var indexItem = i; 

            if(indexItem == 0){
                 displayId();                                  
            }
            if(indexItem == 1){
                displayNode();
            }
            if(indexItem == 2){
                displayNodevalue();
            }
       });
    });
})
function displayId(event){
   // below returns undefined not what I want
   // var $listID = jQuery(this).attr("id"); 
   var $listID = event.target.id;
    alert($listID);
}

function displayNode(event){
    var listNodename = event.target.nodeName;
    alert(listNodename);
}

function displayNodevalue(event){
    var listValue = event.target.nodeValue;
    alert(listValue);
}

如何获取这些项目的event.target属性？控制台显示：

Uncaught TypeError: Cannot read property 'target' of undefined

我已经在Google下面搜索了各种可能的解决方案。他们很好，但我找不到答案。

How to pass the event object to a named function

Getting the ID of the element that fired an event

https://api.jquery.com/event.target/

如果我在这些帖子中错过了答案，请告诉我。似乎应该在某个地方回答这个问题，但我找不到它。如果没有，我会感谢一些帮助，告诉我这段代码有什么问题，以及如何获得事件目标。感谢。

FIDDLE LINK

Answer 1

首先，each()是冗余代码，因为您可以使用index访问所点击元素的$(this).index()。然后，您只需捕获在单击处理程序中引发的事件并将其传递给其他函数。试试这个：

$(document).ready(function () {
    $("ul").children().click(function (e) {
        var indexItem = $(this).index();

        if (indexItem == 0) {
            displayId(e);
        }
        if (indexItem == 1) {
            displayNode(e);
        }
        if (indexItem == 2) {
            displayNodevalue(e);
        }
    });
})

function displayId(e) {
    var $listID = e.target.id;
    alert($listID);
}

function displayNode(e) {
    var listNodename = e.target.nodeName;
    alert(listNodename);
}

function displayNodevalue(e) {
    var listValue = e.target.nodeValue;
    alert(listValue);
}

Updated fiddle

Answer 2

您需要将事件对象作为参数传递

$(document).ready(function () {
    $("ul").children().each(function (i) {
        $(this).click(function (e) {
            var indexItem = i;

            if (indexItem == 0) {
                displayId(e);
            }
            if (indexItem == 1) {
                displayNode(e);
            }
            if (indexItem == 2) {
                displayNodevalue();
            }
        });
    });
})

演示：Fiddle

也可以尝试

$(document).ready(function () {
    var fns = [displayId, displayNode, displayNodevalue]
    $("ul").children().click(function (e) {
        var indexItem = $(this).index();
        fns[indexItem] ? fns[indexItem](e) : '';
    });
})

演示：Fiddle

Answer 3

将点击功能中的事件参数传递给您的函数，如下所示：

$(this).click(function (event) {
   var indexItem = i;
   if (indexItem == 0) {
     displayId(event);
   }
   if (indexItem == 1) {
     displayNode(event);
   }
   if (indexItem == 2) {
     displayNodevalue();
   }
});

无法获取命名函数的事件目标属性

3 个答案: