Question

我想在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的经验，所以请让我知道你对它的看法，以便我可以从中学习！

感谢阿姆斯特丹的问候！

Answer 1

避免内联代码尝试

<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');
        }
    });
});

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

DEMO

Answer 2

有几点需要注意：

你真的应该避免HTML中的内联JavaScript代码，这根本就不干净。将其移至可能的外部JavaScript文件，或者至少在单独的<script>标记中移动。这将是更容易维护的方式。
使用此方法仅触发一次事件似乎很奇怪。您应该使用jQuery one方法，该方法就是为此而制作的。
图标只是消失，因为load方法替换了图标所在的div的内容。

例如，IMO，代码应为：

 $('#social_media').one('mouseover', function(){
   $(this).load('external_file.php');
 });

Answer 3

你真正问题的答案是“代码有点中等。”图标消失的原因是，当您拨打load时，您已将其替换掉。在内部，您的文档是一个名为DOM的文档片段树，用于“文档对象模型” - 滥用术语，因为该树实际上是模型的表达，而不是模型本身。

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

正如@john所说，将内联代码放入内联是不可取的，因为当你想要弄清楚它以后做什么时，很难找到它。

鼠标悬停时加载内容

3 个答案: