gpt4 book ai didi

javascript - 仅使用 HTML 和 JavaScript 显示更多/更少文本

转载 作者:太空狗 更新时间:2023-10-29 13:08:11 24 4
gpt4 key购买 nike

我需要创建一个显示更多/更少文本的功能,但仅使用 JavaScript 和 HTML。我不能使用任何其他库,例如 jQuery,也不能使用 CSS 完成。我添加的示例代码显示“更多”文本,但不显示“更少”文本。

如果有人能指出正确的方向,我将不胜感激。

我一天的大部分时间都在为此绞尽脑汁,因为这显然不是现代的做法,但是,我的 HTML 是:

<html>
<head>
<script type="text/javascript" src="moreless.js"></script>
</head>

<body>
Lorem ipsum dolor sit amet
<p>

<p id="textarea"><!-- This is where I want to additional text--></div>
</p>

<a onclick="showtext('text')" href="javascript:void(0);">See More</a>
<p>
Here is some more text
</body>
</html>

我的 JavaScript 是 (moreless.js):

function showtext()
{
var text="Here is some text that I want added to the HTML file";
document.getElementById("textarea").innerHTML=text;
}

最佳答案

我的回答类似但不同,有几种方法可以实现切换效果。我想这取决于你的情况。最终这可能不是最适合您的方法。

您一直在寻找的缺失部分是创建 if 语句。这允许您切换文本。

More on if statements here.

JSFiddle: http://jsfiddle.net/8u2jF/

Javascript:

var status = "less";

function toggleText()
{
var text="Here is some text that I want added to the HTML file";

if (status == "less") {
document.getElementById("textArea").innerHTML=text;
document.getElementById("toggleButton").innerText = "See Less";
status = "more";
} else if (status == "more") {
document.getElementById("textArea").innerHTML = "";
document.getElementById("toggleButton").innerText = "See More";
status = "less"
}
}

关于javascript - 仅使用 HTML 和 JavaScript 显示更多/更少文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20735726/

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