Question

我有一个“显示更多”按钮，这是有效的。我遇到的问题是，它使用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>

Answer 1

您只需更改相关元素的display CSS属性

即可

＆＃13;

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"
    }
}

＆＃13;

<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>

＆＃13;

Answer 2

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

在此，我将课程less-mode添加到容器中以显示textArea内的文字，并将按钮更改为show less而不是show more。

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

有两种＆＃34;模式＆＃34;：

当container拥有课程less-mode时，请textArea display: block展示，并在链接中显示less元素。
当container没有课程less-mode时，请textArea display: none完全隐藏它，并在more内显示const containerElement = document.getElementById("container"); function toggleText() { if (containerElement.classList.contains('less-mode')) { containerElement.classList.remove('less-mode'); } else { containerElement.classList.add('less-mode'); } }元素链接。

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

＆＃13;

.more-btn .less {
  display: none;
}

.more-btn .more {
  display: block;
}

#textArea {
  display: none;
}

.container.less-mode #textArea {
  display: block;
}

.container.less-mode .more-btn .less {
  display: block;
}

.container.less-mode .more-btn .more {
  display: none;
}

.red {
  background: red;
  color: white;
  padding: 5px;
}

＆＃13;

<div class="container" id="container">
  <a id="toggleButton" class="more-btn" onclick="toggleText();" href="javascript:void(0);">
    <div class="more">See More</div>
    <div class="less">See Less</div>
  </a>
  <div id="textArea">
    <h3>Title</h3>
    <div class="red">red text</div>
  </div>
</div>

＆＃13;

{{1}}

＆＃13;

Answer 3

我试图让它尽可能简单。默认情况下隐藏文本，单击按钮后，文本样式display属性已从none切换为block。

(function() {


  var text = document.getElementById('text');

  var button = document.getElementById('button');
  button.addEventListener('click', function(e) {
    e.preventDefault();
    var status = this.dataset.status;
    if (status === 'less') {
      this.dataset.status = 'more';
      this.innerHTML = 'See More';
      text.style.display = 'none'

    } else {
      this.dataset.status = 'less';
      this.innerHTML = 'See Less';
      text.style.display = 'block'

    }
  });

})();

#text {
  display: none;
}

<div id="text">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium amet consectetur corporis cum cumque distinctio eveniet excepturi expedita facilis incidunt iure maxime nesciunt nulla numquam perferendis qui quo, sint velit?
</div>
<button id="button" data-status="less">See More</button>

JS，使用HTML而不是变量

3 个答案: