-2

我试图为页面上的图片创建鼠标悬停事件，以将该图片的摘要加载到名为“contentarea”的 div 容器中。我是编码新手，所以请原谅我的无能。代码在下面，但我不确定它会起作用。基本上，我在网页上有 5 张狗的照片，我希望将鼠标悬停事件放在狗的照片上，以从名为“content.html”的单独页面加载信息。加载的内容应该从与当前光标悬停的图片的 ID 相同的 ID 加载。然后内容将加载到位于所有图片下方的名为“contentarea”的 div 中。所有图片都属于类狗。我曾试图改编别人的代码，但没有效果。

   <script>
   function(){
    $(.dog).mouseover(function(e) {
        var dogId = $(this).data('id');
        $("contentarea").load("content.html
         # " + dogId + " ");

    }); 
   </script>
4

1 回答 1

1

您实际上可以使用 ajax 加载另一个 html 文件，这不是 zongweil 在他的评论中所说的问题，因为您正在加载的内容不是动态的。

您需要添加以使用 '.dog 指定 .dog 是一个字符串。此外，请解释您使用#dogId 尝试实现的目标。您正在加载的 html 文件上是否有锚点？我认为通过将锚点添加到加载的 html 中，您不会达到预期的效果。如果您只想加载一只狗的信息，则创建几个 content.html 文件，每个文件都有正确的 id，如 content1.html、content2.html 等，然后使用：

<script>
    $('.dog').mouseover(function(e) {
        var dogId = $(this).data('id');
        $("#contentarea").load("content" + dogId + ".html");
    }); 
   </script>

或者改为使用具有正确 id 的单个 HTML 文件：

<div id="dogcontent1">
TEXT TEXT TEXT
</div>
<div id="dogcontent2">
TEXT TEXT TEXT
</div>

然后在脚本上使用这个：

<script>
    $('.dog').mouseover(function(e) {
        var dogId = $(this).data('id');
        $("#contentarea").load("content.html #dogcontent"+ dogId );
    }); 
   </script>
于 2012-12-10T02:09:01.297 回答