gpt4 book ai didi

javascript - html5数据属性以文本形式显示

转载 作者:行者123 更新时间:2023-12-02 15:07:16 25 4
gpt4 key购买 nike

我在w3school找到了一个关于数据属性的示例程序,我想自定义以段落形式显示而不是在警报框中显示并在单击的列表下显示。

我该怎么做?

<!DOCTYPE html>
<html>
<head>
<script>
function showDetails(animal) {
var animalType = animal.getAttribute("data-animal-type");
alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
</script>
</head>
<body>

<h1>Species</h1>
<p>Click on a species to see what type it is:</p>

<ul>
<li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
<!--show here-->
<li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>
<!--show here-->
<li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>
<!--show here-->
</ul>

</body>
</html>

最佳答案

尝试使用.insertAdjacentHTML参数 afterend ,将字符串替换为 <p></p>用于将字符串放置在 alert() 内,添加animal.onclick = null收盘时showDetails调用showDetails最多一次

<!DOCTYPE html>
<html>

<head>
<script>
function showDetails(animal) {
var animalType = animal.getAttribute("data-animal-type");
animal
.insertAdjacentHTML("afterend"
, "<p>The " + animal.innerHTML + " is a " + animalType + ".</p>");
animal.onclick = null;
}
</script>
</head>

<body>

<h1>Species</h1>
<p>Click on a species to see what type it is:</p>

<ul>
<li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
<!--show here-->
<li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>
<!--show here-->
<li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>
<!--show here-->
</ul>

</body>

</html>

关于javascript - html5数据属性以文本形式显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35027875/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com