当父元素被点击时获取子元素的ID

Question

你好，我看过类似的帖子，但没有回答我想要完成的内容。 我在这里做了一个示例 http://jsfiddle.net/edgardo400/R6rVJ/

我想要的基本上是，当父元素被点击时，获取子元素的id并将其存储在一个变量中，以便我可以将变量currentID传递给下面的代码，否则我将不得不为从box1到box9的每个id复制此代码9次。

 jQuery(currentID).delegate("a", "hover", function(event){

        var $img = jQuery(this).parent("li").find('img');
        var image = jQuery(this).attr('data-img');
         jQuery('.defaultimg').stop(true, true).fadeOut();
        if( event.type === 'mouseenter' ) {

            if($img.length){
                $img.show();

            }else{
                jQuery(this).parent("li").append('<img id="theImg" src="' + image + '" />');
            }

        }else{
            if($img){
              $img.hide();  
            }
             jQuery('.defaultimg').stop(true, true).fadeIn();
        }
    });
});

- Edgardo Roldan

---

如果点击事件发生在子元素的范围之外，系统应该如何决定显示哪个子元素ID？ - David Thomas

你知道吗？只需一次以完整形式编写 jQuery 即可。通过将代码包装在 (function($) { .... })(jQuery); 中，您可以使用 $，无论是否使用了 noConflict。 - ThiefMaster

抱歉，如果不清楚，系统会知道，因为被点击的是子元素。我只想让系统告诉我哪个子元素被点击了，并从那里根据该ID执行事件。 我在这里有一个可工作的模型，至少当我说到ID时是这样的： http://testdomain.edgardoroldanonline.com/apple-power/ 你可以在毒物控制中看到它的工作情况。 - Edgardo Roldan

Answer 1

$('#boxes').on('click', function(e) {
    var currentID = e.target.id;
    console.log(currentID);

......rest of code

- adeneo

---

我之前尝试过，它给了我父元素的ID...但我想要的是当子元素被点击时，jQuery获取其ID并使用该ID执行淡出和其他操作。 - Edgardo Roldan

那么，你尝试错了 :-) 对我来说似乎可以工作，它会给出所点击的框的ID FIDDLE，至于代码的其余部分，由于在你的fiddle中缺失，我无法猜测它应该是什么样子。 - adeneo

我看了你的“fiddle”，我发现“console.log”还在，但是我看不到id，它在firebug中没有显示出来。我对“fiddle”很陌生，你怎么看到它？你得到什么id，是盒子还是子代id，例如“box1”。 - Edgardo Roldan

奇怪的是，任何记录到控制台的内容都会在控制台中显示。然而，脚本的其余部分存在错误，导致Firebug挂起，但在Chrome中可以正常工作。尝试使用FIDDLE，不包含其他有问题的代码，它就能正常显示。 - adeneo

当然，如果你需要更改jQuery选择器，只需将井号（#）更改为点号（.），如果你需要更改e.target.id，则使用e.target.className。 - adeneo

Answer 2

在 JavaScript 中，它应该是这样的：

var a = document.getElementById('#boxes');
a.onclick = function(e){
    console.log(e.target.id);
}

- lavokad

Answer 3

如果您只想让您的代码在控制台上工作并显示框名称，那么您应该设置

jQuery('#boxes').bind('click', function(event) {

     var currentID = jQuery(event.srcElement).attr('id');

     /* rest of your code */
});

你可能想做一些更容易的事情

jQuery('#boxes').children().bind('click', function() {

   jQuery(this).delegate... 

});

虽然我不确定你为什么要这样做...

已修复http://jsfiddle.net/nxTDA/

- drinchev

---

我非常感谢您展示为什么我在做这个，您可以在http://testdomain.edgardoroldanonline.com/apple-power/中看到它。当您单击毒物控制时，框会出现，我希望当您将鼠标悬停在任何ul项上时，会出现不同的图像。http://jsfiddle.net/edgardo400/cham5/ 新版本到目前为止，唯一有效的方法是放置id box1).delegate - Edgardo Roldan

我只是好奇，因为每个问题都有很多解决方案，如果有人能从更大的角度看到问题，他会提出更好的解决方案。公平吧。 - drinchev

没问题 :D 那么你认为当单击子元素时，能否让 jQuery 存储其 ID？ - Edgardo Roldan