我有一个“显示更多”按钮,它可以正常工作。我遇到的问题是,它使用来自 var text
的文本我希望它直接从 HTML 使用它,有什么建议吗?
var status = "less";
function toggleText() {
var text = "TEST";
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"
}
}
<div id="textArea">
<!-- Here I want to implement HTML code and show it when clicked "See More"-->
</div>
<a id="toggleButton" onclick="toggleText();" href="javascript:void(0);">See More</a>
最佳答案
您可以简单地更改相关元素的 display
CSS 属性
var status = "less";
function toggleText()
{
if (status == "less") {
document.getElementById("textArea").style.display = "block";
document.getElementById("toggleButton").innerText = "See Less";
status = "more";
} else if (status == "more") {
document.getElementById("textArea").style.display = "none";
document.getElementById("toggleButton").innerText = "See More";
status = "less"
}
}
<div id="textArea" style="display: none;">
Here I want to implement HTML code and show it when clicked "See More"
</div>
<a id="toggleButton" onclick="toggleText();" href="javascript:void(0);">See More</a>
关于javascript - JS,使用 HTML 而不是变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50192361/