Question

我无法相信我遇到这么多麻烦;认为谷歌的第一个结果会做到这一点。我只是试图翻转图像并用另一个预定义文本替换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>

Answer 1

问题在于您在bind()功能后关闭。您需要添加DOM就绪函数。

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

See this working fiddle

Answer 2

几点：

（1）{jQuery 1.7中已弃用.bind()并替换为.on()。语法几乎完全相同。

（2）只有在已经渲染DOM之后添加到DOM的元素才需要.on()。换句话说，如果您在初始显示后向页面注入新内容，则需要使用.on()。否则，没有必要。请参阅以下代码中的mouseout示例。 顺便说一句，这被称为event delegation，值得一读。

（3）正如Vincent已经指出的那样，在尝试将事件监视代码绑定到这些元素之前，需要document.ready使代码等待所有DOM元素出现。否则，javascript可以在之前执行，这些元素存在并且绑定不会成功（代码如何绑定到尚不存在的东西？） - 这是你看到了什么。未检测到鼠标悬停，因为代码未在观看p标记。

＆＃13;
＆＃13;
$(document).ready(function(){ $(document).on('mouseover', '#module_1', function() { $('#module_main').text('Module 1'); }); $('#module_1').mouseout(function() { $('#module_main').text('ICON 1'); }); }); //END document.ready
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <p id="module_main">Select a Module</p> <p id="module_1">Icon 1</p> <p id="module_2">Icon 2</p>
＆＃13;
＆＃13;
＆＃13;

Answer 3

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

在另一个Div的翻转时替换P元素中的文本

3 个答案: