Question

以下代码可以显示悬停在图像上的代码，但只显示在span标记中写入的文本：

<html>
<style type="text/css"> 

div#photo_container{max-width:25em;height:auto;position:relative;margin:1.563em auto;}

div#photo_container a{text-decoration:none;color:black;cursor:default;font-weight:normal; font-family: "Roboto", sans-serif; color: white}

div#photo_container a span{visibility:hidden;position:absolute;left:15em;top:-2.3em;background:#333333;width:17em;border:1px solid #404040;font-size:0.8em;padding:0.3em;cursor:default;line-height:140%;border-radius: 6px;}

div#photo_container a:hover span{visibility:visible;}

</style>


<div id="photo_container">
<a href="#">
    <img src="https://vignette.wikia.nocookie.net/youtubepoop/images/f/f7/5Pikachu.png" width="250" height="250" alt="PIKACHU">
        <span>
            Pikachu is a short, chubby rodent Pokémon. It is covered in yellow fur with two horizontal brown stripes on its back. It has a small mouth, long, pointed ears with black tips, brown eyes, and two red circles on its cheeks. There are pouches inside its cheeks where it stores electricity. It has short forearms with five fingers on each paw, and its feet each have three toes. At the base of its lightning bolt-shaped tail is patch of brown fur at the base
        </span>
</a>
</div> 
</html>

但我不想在span标签中对信息进行硬编码，并希望从名为dummy.txt的文本文件中上传。

我有一个JQuery代码来上传和显示文本中的信息，但我不知道如何合并这两个。请帮帮我。

以下是将文本文件从本地计算机上传到html页面的JQuery代码：

<script>
        $(document).ready(function(){
            $("#<id_name>").load("dummy.txt");
        });
</script>

Answer 1

你很亲密。您必须使用。get方法，它是Ajax方法和

的简写

使用HTTP GET请求从服务器加载数据。

你可以像这样使用它：

ssl.create_default_context

此处的第二个参数相当于成功函数。

我使用.text()方法，因为它是一个span标记及其纯文本。如果您使用html格式化文字，则必须使用.html()方法。

Answer 2

不需要为此使用jQuery和ajax。使用对象标记和加载数据并直接在span中使用它。

<html>
<style type="text/css"> 

div#photo_container{max-width:25em;height:auto;position:relative;margin:1.563em auto;}

div#photo_container a{text-decoration:none;color:black;cursor:default;font-weight:normal; font-family: "Roboto", sans-serif; color: white}

div#photo_container a span{visibility:hidden;position:absolute;left:15em;top:-2.3em;background:#333333;width:17em;border:1px solid #404040;font-size:0.8em;padding:0.3em;cursor:default;line-height:140%;border-radius: 6px;}

div#photo_container a:hover span{visibility:visible;}

</style>


<div id="photo_container">
<a href="#">
    <img src="https://vignette.wikia.nocookie.net/youtubepoop/images/f/f7/5Pikachu.png" width="250" height="250" alt="PIKACHU">
        <span>
           **<object width="400" height="400" data="textfile.txt"></object>**
        </span>
</a>
</div> 
</html>

如何在悬停在图像上时显示.txt文件中的数据？

2 个答案: