Javascript JS，使用HTML而不是变量

我有一个“显示更多”按钮，它可以工作。我遇到的问题是，它使用了

var text

中的文本，我希望它直接使用HTML中的文本，有什么建议吗

var status=“less”；
函数toggleText（）{
var text=“测试”；
如果（状态=“更少”）{
document.getElementById（“textArea”）.innerHTML=text；
document.getElementById（“toggleButton”）.innerText=“查看较少”；
status=“更多”；
}否则如果（状态=“更多”）{
document.getElementById（“textArea”）.innerHTML=“”；
document.getElementById（“toggleButton”）.innerText=“查看更多”；
status=“less”
}
}

---

您只需更改相关元素的

显示

CSS属性即可

var status=“less”；
函数toggleText（）
{
如果（状态=“更少”）{
document.getElementById（“textArea”）.style.display=“block”；
document.getElementById（“toggleButton”）.innerText=“查看较少”；
status=“更多”；
}否则如果（状态=“更多”）{
document.getElementById（“textArea”）.style.display=“无”；
document.getElementById（“toggleButton”）.innerText=“查看更多”；
status=“less”
}
}

在这里，我想实现HTML代码，并在单击“查看更多”时显示它

您可以将一个类添加到两个元素的容器中，以同时更改它们的状态

在这里，我将类

less模式

添加到容器中，以显示

textArea

内的文本，并将按钮更改为

show less

，而不是

show more

我们可以通过检查容器上是否已经存在该类来了解状态，而不是将状态保存在javascript中

有两种“模式”：

• 当

  container

  具有类

  less模式时，使
  textArea
  显示：block
  显示它，并显示链接内的
  less
  元素

• 当

  容器

  没有类

  较少模式

  时，使

  文本区域

  显示：无

  将其完全隐藏，并在链接内显示

  更多

  元素

这样，视觉变化的大部分责任在于CSS和HTML。JavaScript代码仅在它们之间切换

const containerElement=document.getElementById（“容器”）；
函数toggleText（）{
if（containerElement.classList.contains（'less-mode'））{
containerElement.classList.remove（'less-mode'）；
}否则{
containerElement.classList.add（'less-mode'）；
}
}

。更多btn.更少{
显示：无；
}
.更多btn.更多{
显示：块；
}
#文本区{
显示：无；
}
.container.less-mode#text区域{
显示：块；
}
.container.less-mode.more btn.less{
显示：块；
}
.container.less-mode.more btn.more{
显示：无；
}
瑞德先生{
背景：红色；
颜色：白色；
填充物：5px；
}

标题
红色文本

我已经尽力让它尽可能简单。 默认情况下，文本是隐藏的，单击按钮后，文本样式

display

属性将从

none

切换到

block

（函数（）{
var text=document.getElementById（'text'）；
var button=document.getElementById（'button'）；
按钮。addEventListener（'click'，函数（e）{
e、 预防默认值（）；
var status=this.dataset.status；
如果（状态=='less'）{
this.dataset.status='more'；
this.innerHTML='查看更多'；
text.style.display='none'
}否则{
this.dataset.status='less'；
this.innerHTML='See Less'；
text.style.display='block'
}
});
})();
#文本{
显示：无；
}

Lorem ipsum dolor sit amet，奉献精英。除了在最大程度上不履行义务的情况下，在任何情况下，是否有必要对身体和身体进行认证？
更多信息请参见
应
@GeorgeBailey标记名不区分大小写。我刚才提到的是最佳做法