1

我想在 div 内的图标鼠标悬停时加载 div 的内容。此外，鼠标悬停应该只触发一次，并且最好在加载内容后图标应该消失。

将在 de div 中加载的内容将是带有社交媒体按钮的外部文件。如果您想知道；我不希望它们与页面的其余部分一起加载，因为它们会减慢速度。此外，一些访问者可能不喜欢 FB 和 G+ 等网站跟踪他们的互联网活动。

所以，我收集了一些代码并复制粘贴了一些，这就是我想出的：

<div id="social_media">

<img src="icon.png" onmouseover="javascript:$('#social_media').load('external_file.php'); this.onmouseover=null;" alt="Show Social Media Buttons!" />

</div>

问题是，它工作得非常好:) 但是因为它是我从 3 个不同的来源获得并粘贴在一起的代码，所以我的问题是它是否有用？例如，我从来没有试图找到一种方法来删除鼠标悬停时的图标，它只是这样做了:)

我几乎没有编写 Javscript/jQuery 的经验，所以请告诉我你的想法，以便我从中学习！

来自阿姆斯特丹的感谢和问候！

4

3 回答 3

2

避免内联代码尝试

<div id="social_media">

<img src="icon.png"  alt="Show Social Media Buttons!" />

</div>

将mouseenter事件处理程序附加到img 

$(function(){// short cut of $(document).ready(); read more on google
    $("#social_media>img").bind({
        mouseenter:function(e){
         $('#social_media').load('external_file.php');
        }
    });
});

PS选择器没有优化，也没有这个代码的结果只是为了给你一个想法

演示

于 2012-05-27T20:43:58.413 回答
1

需要注意的几点：

  • 你真的应该避免 HTML 中的内联 JavaScript 代码，这根本不干净。将其移动到可能的外部 JavaScript 文件中，或者至少在单独的<script>标记中。这将是更容易维护的方式。

  • 使用这种方法只触发一次事件似乎很奇怪。您应该使用 jQueryone方法，该方法正是为此而生的。

  • 图标只是消失了，因为该load方法替换了图标所在的 div 的内容。

例如，IMO，代码应该是：

 $('#social_media').one('mouseover', function(){
   $(this).load('external_file.php');
 });
于 2012-05-27T20:44:27.487 回答
1

您真正问题的答案是“代码有点中等”。图标消失的原因是当你打电话时load你替换了它。在内部，您的文档是称为 DOM 的文档树，用于“文档对象模型”——滥用术语，因为该树实际上是模型的表达，而不是模型本身。

那棵树中有一个节点是你的div，它包含一个带有图标的节点img。当您执行 时load()，该节点将替换为您加载的内容。

正如@john 所说，将这样的代码内联是不可取的，因为当您想知道它稍后在做什么时，可能很难找到。

于 2012-05-27T20:49:33.490 回答