单击父元素时获取子元素的ID

Posted 2023-05-09

【中文标题】单击父元素时获取子元素的ID

【英文标题】：get id of child element when parent is clicked

【发布时间】：2012-05-03 10:06:42

【问题描述】：

您好，我看过类似的帖子，但没有人回答我想要完成的任务 我在这里做了一个样本 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();
        
    );
);

【问题讨论】：

如果点击事件发生在子元素的边界之外，这个系统应该如何决定显示哪个子id？

你知道你只需要写一次长格式的jQuery吗？通过将代码包装在(function($) .... )(jQuery); 中，无论noConflict 是否被使用，您都可以使用$。

抱歉，如果不清楚，系统会​​知道，因为点击的是孩子我只想让系统告诉我点击了哪个孩子的 ID，然后根据该 ID 执行事件当我说 id 时，这里有一个很好的工作模型 testdomain.edgardoroldanonline.com/apple-power 你可以看到它在毒物控制中工作

【参考方案1】：

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

......rest of code

【讨论】：

我之前尝试过它，它给了我父母的 id...我想要的是当点击孩子时 jquery 获取它的 id 然后使用它来执行淡出和一切使用那个id

好吧，那你试错了 :-) 似乎对我有用，它给出了点击的框的 ID FIDDLE，至于其余的代码，我猜不出来它应该是什么样子，因为它在你的小提琴中丢失了。

我看了你的小提琴，我看到 console.log 仍然存在，但我看不到它没有出现在 firebug 中的 id。我是新手，你怎么看？你得到什么 id 你得到的是 box 还是孩子的 id box1 例如

任何登录到控制台的东西都奇怪地显示在控制台中。但是，脚本的其余部分有一个错误导致 Firebug 挂起，但在 Chrome 中可以正常工作。试试FIDDLE 没有其他错误代码，它就会显示出来。

好的，看到了它，它工作得很棒：D，你知道如何让它与一个类一起工作，只需要 3 行代码

【参考方案2】：

如果你只想让你的代码工作并在你的控制台上显示盒子名称，你应该设置

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/

【讨论】：

我真的很高兴展示我为什么这样做，当您单击毒物控制时，您可以在testdomain.edgardoroldanonline.com/apple-power 中看到它，我希望当您将鼠标悬停在任何 ul 项目中时图片出现jsfiddle.net/edgardo400/cham5新版本到目前为止，它唯一有效的方法是放置id box1).delegate

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

没关系 :D 所以你认为有什么可能让 jquery 在点击时存储孩子的 id

【参考方案3】：

在 javascript 中是：

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