Javascript html单击事件上的切换函数

我试图在页面上添加一个简单的“阅读更多”按钮。我设法准备了一个工作函数来隐藏元素中的最大字符数。为了调用函数，我在HTML中准备了一个按钮，带有一个“onclick”事件来调用函数

现在发生了一些不应该发生的事情。按钮应该会显示隐藏的文本，但情况正好相反，每次单击按钮时，会删除更多字符，直到只剩下点为止，即使我有一个变量，将字符限制为15个。我花了太多时间试图弄明白这一点，因为我知道这可能是基本的jQuery。我很抱歉，如果是这样的话，我只是希望有人能指出我做错了什么

HTML:

阅读更多

jQuery：

function textCollapse() {
  var limit = 15;
  var chars = jQuery(".field-content p").text();
  if (chars.length > limit) {
    var visiblePart = jQuery("<span class='visiblepart'> "+ chars.substr(0, limit) +"</span>");
    var dots = jQuery("<span class='dots'>... </span>");

    jQuery(".field-content p").toggle()
      .empty()
      .append(visiblePart)
      .append(dots)
  }
};

函数textCollapse（）{
风险价值限额=15；
var chars=jQuery（“.field content p”）.text（）；
如果（字符长度>限制）{
var visiblePart=jQuery（“+chars.substr（0，limit）+”）；
var dots=jQuery（“…”）；
jQuery（“.field content p”）.toggle（）
.empty（）
.append（可视部分）
.附加（点）
}
};

我会将全文内容保存到外部变量中并保存在那里。无需在每次单击按钮时重新查询文本内容。另外，最好有一个变量来存储文本的状态-是否折叠，而不是每次比较

var fullText = jQuery(".field-content p").text();
var collapsed = false;

function textCollapse() {
    var limit = 15;
    if (collapsed) {
        var visiblePart = jQuery("<span class='visiblepart'> " + fullText + "</span>");
        jQuery(".field-content p")
                .empty()
                .append(visiblePart)

        collapsed = false;
    } else {
        var visiblePart = jQuery("<span class='visiblepart'> " + fullText.substr(0, limit) + "</span>");
        var dots = jQuery("<span class='dots'>... </span>");

        jQuery(".field-content p")
                .empty()
                .append(visiblePart)
                .append(dots)

        collapsed = true;

    }
}

var fullText=jQuery（“.field content p”）.text（）；
var=false；
函数textCollapse（）{
风险价值限额=15；
如果（折叠）{
var visiblePart=jQuery（“+fullText+”）；
jQuery（“.fieldcontentp”）
.empty（）
.append（可视部分）
折叠=假；
}否则{
var visiblePart=jQuery（“+fullText.substr（0，limit）+”）；
var dots=jQuery（“…”）；
jQuery（“.fieldcontentp”）
.empty（）
.append（可视部分）
.附加（点）
崩溃=真；
}
}

---

另外，我认为您不需要调用

toggle（）

，因为所有操作都是同步执行的，在清空和追加节点之前，不需要隐藏

p

元素。

谢谢Maximus！但是，当我加载/刷新页面时，我仍然会得到全文，而当文本折叠时，限制不会被应用（我确实将字符更改为全文）。同样奇怪的是，在发生任何事情之前，我必须点击两次按钮（在if（collapsed）中删除“！”修复了该问题）。@Marrrc，我更新了代码。现在应该可以用了。请检查并标记一个答案为接受，如果它工作正常。谢谢，这确实工作得更好，但我仍然从全文开始。一旦我点击按钮，我只留下了点，然后它只是在点之间切换，根本没有文本。除此之外，它正是我想要的。我只需要弄清楚如何从折叠的文本开始，并在折叠时显示不仅仅是点。我很想听到一个解决方案，但我想我可以在你目前提供的帮助下找到答案。谢谢你的帮助！

var fullText = jQuery(".field-content p").text();
var collapsed = false;

function textCollapse() {
    var limit = 15;
    if (collapsed) {
        var visiblePart = jQuery("<span class='visiblepart'> " + fullText + "</span>");
        jQuery(".field-content p")
                .empty()
                .append(visiblePart)

        collapsed = false;
    } else {
        var visiblePart = jQuery("<span class='visiblepart'> " + fullText.substr(0, limit) + "</span>");
        var dots = jQuery("<span class='dots'>... </span>");

        jQuery(".field-content p")
                .empty()
                .append(visiblePart)
                .append(dots)

        collapsed = true;

    }
}