如何将“显示更多”按钮的文本来源从JS变量改为HTML？

嘿，这个需求很好实现，咱们可以通过两种常用方式把按钮文本从HTML里读取，不用再硬编码在JS变量里。下面给你具体的实现方案：

方案一：利用HTML data-* 属性存储切换文本 #

这种方式灵活性最高，你可以直接在HTML按钮标签里定义两种状态的文本，JS只需要读取这些属性值就行——后期修改文本直接改HTML就行，完全不用碰JS代码。

修改后的HTML： #

<div id="textArea"></div>
<button id="toggleButton" data-less-text="See More" data-more-text="See Less">See More</button>

修改后的JS： #

var status = "less";
// 提前获取按钮元素，避免重复DOM查询
const toggleBtn = document.getElementById("toggleButton");
// 从data属性里读取预设的两种状态文本
const moreText = toggleBtn.dataset.moreText;
const lessText = toggleBtn.dataset.lessText;
// 如果想把显示的内容也从HTML取，可给textArea加data-content属性，这里先保留原内容示例
const contentText = "TEST";

function toggleText() {
  const textArea = document.getElementById("textArea");
  if (status === "less") {
    textArea.innerHTML = contentText;
    toggleBtn.innerText = moreText;
    status = "more";
  } else if (status === "more") {
    textArea.innerHTML = "";
    toggleBtn.innerText = lessText;
    status = "less";
  }
}

// 给按钮绑定点击事件
toggleBtn.addEventListener("click", toggleText);

方案二：复用按钮的初始文本作为默认状态 #

如果你的按钮初始文本就是“See More”（也就是status为less时的文本），那可以直接把初始文本存起来，不用额外加data属性，写法更简洁。

修改后的HTML： #

<div id="textArea"></div>
<button id="toggleButton">See More</button>

修改后的JS： #

var status = "less";
const toggleBtn = document.getElementById("toggleButton");
// 存储按钮的初始文本（也就是"See More"）
const initialText = toggleBtn.innerText;
// 另一种状态的文本也可以从HTML隐藏元素取，这里先写死示例
const seeLessText = "See Less";
const contentText = "TEST";

function toggleText() {
  const textArea = document.getElementById("textArea");
  if (status === "less") {
    textArea.innerHTML = contentText;
    toggleBtn.innerText = seeLessText;
    status = "more";
  } else if (status === "more") {
    textArea.innerHTML = "";
    toggleBtn.innerText = initialText;
    status = "less";
  }
}

toggleBtn.addEventListener("click", toggleText);

补充小提示 #

• 优先推荐方案一，因为它的可维护性更高，所有文本都集中在HTML里，非开发人员也能轻松修改按钮文字。
• 如果你连显示的TEST内容也想从HTML里取，可以给textArea加个data-content="TEST"属性，然后用document.getElementById("textArea").dataset.content获取，这样完全不用在JS里写死内容。

内容的提问来源于stack exchange，提问作者Reginald1234