Question

基本上，我有一些代码：

<!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>

顶部，左侧不断变化，但文字只停留在左上角。

任何人都知道哪个部分出了问题？

P.S。：我把它改为：

<!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();
    });

Answer 1

ID对于元素是唯一的，CLASS用于元素组。您可以在CSS中定义类属性，以使该类的所有对象看起来都相同。

例如：

<input type="text" id="text1" class="myText">
<input type="text" id="text2" class="myText">

Answer 2

你有同一个班级的多个元素吗？因为如果是这样，解释器只接受该类的第一个元素。 $（“。classname”）是包含此类的所有dom对象的数组。如果这个类是唯一的，那么你应该没有问题。

实现e.pageX和e.pageY时，html属性“id”和“class”有什么区别

2 个答案: