基本上，我得到了一些代码:
<!doctype html>
<html lang="en">
<head>
<title>Learning JQuery</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jq_files/myjQuery.js"></script>
</head>
<body>
<div id="hover_over_event">
<div id="hoverdiv"></div><br />
<p><img class="hover" src="../img/Linux-Pinguino.png" hovertext="A lovely Penguin"/></p>
</div>
</body>
这是 myjQuery.js:
$('.hover').mousemove(function(e) {
var hovertext = $(this).attr('hovertext');
$('#hoverdiv').text('('+e.pageX+10+', '+e.pageY+10+')').show();
$('#hoverdiv').css('top', e.pageY+10).css('left', e.pageX+10);
}).mouseout(function() {
$('#hoverdiv').hide();
});
我更喜欢保留这个功能。所以我打算将 id="hoverdiv"更改为 class="hoverdiv"; js 文件中的选择器将为 $('.hoverdiv')。
以前，它运行良好。提示文本可以跟随光标并显示位置。但是当我将其更改为类时，提示文本将卡在左上角，尽管当我在图片中移动光标时位置正在发生变化。我打开Chrome开发者，我可以看到:<div class="hoverdiv" style="top: 218px; left: 666px; display: block;">(65610, 20810)</div>
顶部、左侧不断变化，但文本仅保留在左上角。
有人知道哪个部分出了问题吗？
PS:我将其更改为:
<!doctype html>
<html lang="en">
<head>
<title>Learning JQuery</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jq_files/myjQuery.js"></script>
</head>
<body>
<div id="hover_over_event">
<div class="hoverdiv"></div><br />
<p><img class="hover" src="../img/Linux-Pinguino.png" hovertext="A lovely Penguin"/></p>
</div>
</body>
和js文件:
$('.hover').mousemove(function(e) {
var hovertext = $(this).attr('hovertext');
$('.hoverdiv').text('('+e.pageX+10+', '+e.pageY+10+')').show();
$('.hoverdiv').css('top', e.pageY+10).css('left', e.pageX+10);
}).mouseout(function() {
$('.hoverdiv').hide();
});
最佳答案
ID对于元素来说是唯一的，CLASS对于元素组来说是唯一的。 您可以在 CSS 中定义类属性，以使该类的所有对象看起来相同。
例如:
<input type="text" id="text1" class="myText">
<input type="text" id="text2" class="myText">
关于jquery - 实现e.pageX和e.pageY时html属性 "id"和 "class"有什么区别，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42021749/