gpt4 book ai didi

jquery 报告悬停在哪个元素上

转载 作者:行者123 更新时间:2023-12-01 06:52:09 24 4
gpt4 key购买 nike

我正在尝试构建一个迷你检查器工具,它可以简单地报告悬停在其上的元素、其 ID 以及它所具有的任何类。

我构建了一个演示页面,其中有 4 个嵌套元素:
html > 正文 > 外部容器 > 内部容器

我已经设法让它以一种方式工作,当从外部元素到内部元素时,它会正确报告信息,但当反向时,报告的元素是前一个元素。

查看实际效果 - http://jsfiddle.net/sygad/kmJ5s/

<head>

<meta charset="utf-8">

<title>Element Hover</title>

<style>

html {margin:0; padding:40px 20px 0; background:#333; font:0.9em/1.1em "Arial", sans-serif}
body {margin:0; padding:0 0 10px; background:#555}

#outerContainer {margin:20px; padding:0; background:#777; width:240px; height:260px;}
#innerContainer {margin:20px; padding:0; background:#999; width:200px; height:200px;}

p#info {position:absolute; top:0; left:0}
p {margin:0; padding:0; color:white}

</style>

</head>

<body>

<p id="info">Current element: <span></span></p>

<p>Body</p>

<div id="outerContainer">
<p>Outer</p>

<div id="innerContainer">
<p>Inner</p>
</div>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<script>

//Initialise
var nodeName = '';
var ids = '';
var classes = '';

$('*').hover(function(e)
{
//Clear
nodeName = '';
ids = '';
classes = '';

nodeName = $(this).context.nodeName.toLowerCase();

if ($(this).attr('id') != undefined)
{
ids = ' #' + $(this).attr('id');
}

if ($(this).attr('class') != undefined)
{
classes = ' .' + $(this).attr('class');
}

$('p#info span').text(nodeName+ids+classes)
})
</script>

</body>

最佳答案

尝试使用 $(e.currentTarget) 而不是 $(this)

关于jquery 报告悬停在哪个元素上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13202894/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com