Question

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

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

    }); 
   </script>

Answer 1

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

您需要添加以使用'指定.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>

将鼠标悬停在ajaxload脚本上

1 个答案: