Javascript 在滚动另一个Div时替换P元素中的文本_Javascript_Jquery_Html

Javascript 在滚动另一个Div时替换P元素中的文本

javascript jquery html

Javascript 在滚动另一个Div时替换P元素中的文本,javascript,jquery,html,Javascript,Jquery,Html,我不敢相信我在这件事上有这么多麻烦；我以为谷歌的第一个结果就可以做到。我只是试着翻滚一个图像，用另一个预定义的文本替换p元素中的文本，选择一个模块。当鼠标离开图像时，p元素返回默认文本选择模块这就是我所拥有的，但是剧本没有回应 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">&

我不敢相信我在这件事上有这么多麻烦；我以为谷歌的第一个结果就可以做到。我只是试着翻滚一个图像，用另一个预定义的文本替换p元素中的文本，选择一个模块。当鼠标离开图像时，p元素返回默认文本选择模块

这就是我所拥有的，但是剧本没有回应

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<script>
    $('p#module_1').bind('mouseover', function() {
        $('p#module_main').text('Module 1');
    });
});
</script>
</head>
<body>

<p id="module_main">Select a Module</p>

<p id="module_1">Icon 1</p>
<p id="module_2">Icon 2</p>

</body>
</html>

问题是当您在绑定函数之后关闭时。您需要添加一个DOM就绪函数

$(document).ready(function(){
    $('p#module_1').bind('mouseover', function() {
        $('p#module_main').text('Module 1');
    });
});

有几点：

1.bind在jQuery 1.7中被弃用，并替换为.on。语法几乎相同

2.只有在呈现DOM之后添加到DOM中的元素才需要on。换句话说，如果在初始显示后向页面注入新内容，则需要使用.on。否则，没有必要。请参见下面代码中的mouseout示例。顺便说一下，这叫做事件委派，值得一读

3正如Vincent已经指出的，您需要document.ready使代码等待所有DOM元素出现，然后再尝试将事件监视代码绑定到这些元素。否则，javascript可能会在这些元素存在之前执行，绑定也不会成功。代码如何绑定到不存在的东西这就是你看到的。未检测到鼠标悬停，因为代码未监视p标记

$document.readyfunction{ $document.on'mouseover'，module_1'，函数{ $'module_main'。文本'module 1'； }; $'module_1'.mouseoutfunction{ $'module_main'。文本'ICON 1'； }; }; //结束文件.ready

选择一个模块

图标1

图标2无法工作的原因是，在将p标记加载到dom中之前，正在调用bind函数。这就是为什么上面的答案是有效的，它会延迟运行bind函数，直到所有html元素都加载到dom中。如果将脚本标记向下移动到p标记下面，并删除脚本标记中的最后一行，由于事件的顺序，它也会起作用。

为什么要使用double}。删除一个就行了。并将其放入$document.readyfunction{…}语法错误附加}；在脚本中标记：谢谢Vincent，它正在工作，但是当我从图标滚动时，我需要添加什么才能使它复位以选择模块？再次感谢，谢谢你的解释