Question

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

现在发生一些不应该发生的事情。按钮应该显示隐藏的文本，但相反的情况发生，每次单击按钮时，除非我只剩下点，所以删除了更多的字符，即使我有一个将字符限制为15的var。我花了太多时间尝试要知道这可能是基本的jQuery。如果是这种情况，我道歉，我希望有人能指出我在这里做错了什么。

HTML：

<button class="content-toggle" onclick="textCollapse()">Read more</button>

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)
  }
};

Answer 1

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

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;

    }
}

此外，我认为您不需要致电toggle()，因为所有操作都是同步执行的，并且在清空和追加节点之前无需隐藏p元素。< / p>

在html点击事件

1 个答案: