HTML 和 JavaScript 如何使第 n 行文本出现第 n 次点击？

问题描述

我对 html 和 JavaScript 非常陌生，但我是理解编程的高级新手。我正在寻找一种方法，使第 n 行文本出现在第 n 次按钮单击时，并且当没有更多文本行显示该按钮时什么也不做。我想应该有一些索引来跟踪点击次数，并有一种方法可以将一些应该发生的点击次数传递给某些功能，但是我找不到任何东西。有人可以指出我正确的方向或演示我必须做的基础知识。这是我想要在网页上发生的事情的视觉演示：

点击这里

点击这里
这行出现在第一次点击

点击这里
这行出现在第一次点击
此行出现在第二次点击

点击这里
这行出现在第一次点击
此行出现在第二次点击
...
此行出现在第 n 次点击

这里有一些代码可以满足我的期望。我是否可以进行任何更改以使其更普遍地工作？

$(function() {

  $("#visible").click(function() {

    if (typeof this.counter == 'undefined') {
      this.counter = 0;
    }

    $('#invisible' + this.counter).toggleClass("show");

    ++this.counter;
  });

});

.hide {
  display: none;
}

.show {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p id="visible">Click This</p>

<p id="invisible0" class="hide">this line appears on the first click</p>

<p id="invisible1" class="hide">this line appears on the second click</p>

<p id="invisible2" class="hide">this line appears on the third click</p>

提前致谢，
矢量jon

解决方法

这可能不是最佳的，但至少它是您可以开始的。 基本上，我设置了 font-size（在本例中为 12px），然后将 height + 2px（14px）添加到 div 容器的大小。

https://jsfiddle.net/hassench/r7cgjzus/9/

var expand = () => {
  $('.expandable').css('height',$('.expandable').height() + 14);
}

.expandable {
  font-size: 12px;
  height: 15px;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='expandable' onclick='expand()'>
  Lorem ipsum dolor sit amet,consectetur adipiscing elit. Nullam libero ex,vehicula id egestas sed,iaculis vel enim. Curabitur interdum sollicitudin turpis,sit amet semper magna rutrum pharetra. Donec blandit,enim at volutpat feugiat,nunc orci placerat
  nunc,eu placerat tortor libero nec est. Aliquam erat volutpat. Ut dapibus tellus metus,a lacinia risus gravida quis. Nullam placerat maximus risus ut tristique. Mauris rhoncus sagittis erat,eget mollis ligula. Nulla accumsan fermentum dictum.
</div>