Javascript jQuery显示更多/更少的内容

我在显示和隐藏

标签的内容时遇到问题。我需要做的是，在页面加载时，将160个字符限制为40个，然后单击“显示更多”时，将显示160个字符，如果再次单击按钮，则只会看到40个字符，我的问题是，它会将所有

标签中的所有内容一起显示在一起，并且会为每个标签提供帮助，提前感谢

HTML

<section class="row featured">
        <div class="column four comment">
            <img src="images/gallery/gallery-1.jpg" alt="">
            <div class="content">
                <h2>Lorem Ipsum</h2>
                <p class="limit">Aliquam dolor odio, porta id mollis ullamcorper, imperdiet sit amet odio. In eleifend dapibus massa ac aliquam. Nullam vulputate lectus ac nunc molestie mollis.</p>
                <button class="more align-right"><p class="highlight">Read more</p></button>
            </div>
        </div>
        <div class="column four comment">
            <img src="images/gallery/gallery-3.jpg" alt="">
            <div class="content">
                <h2>Lorem Ipsum</h2>
                <p class="limit">Aliquam dolor odio, porta id mollis ullamcorper, imperdiet sit amet odio. In eleifend dapibus massa ac aliquam. Nullam vulputate lectus ac nunc molestie mollis.</p>
                <button class="more align-right"><p class="highlight">Read more</p></button>
            </div>
        </div>
        <div class="column four comment">
            <img src="images/gallery/gallery-2.jpg" alt="">
            <div class="content">
                <h2>Lorem Ipsum</h2>
                <p class="limit">Aliquam dolor odio, porta id mollis ullamcorper, imperdiet sit amet odio. In eleifend dapibus massa ac aliquam. Nullam vulputate lectus ac nunc molestie mollis.</p>
                <button class="more align-right"><p class="highlight">Read more</p></button>
            </div>
        </div>
</section>

• 它返回的是“Aliquam dolor odio，porta id mollis ullamcorper，imperdiet sit amet odio.在eleifend dapibus massa ac Aliquam.Nullam vulputate lectus ac nunc Molstie mollis.”每一个p乘以3，提前感谢

  ---

  您的内容变量从.limit类的所有三个实例中获取文本，因此您将获得三重文本
  如果仅将其限制为第一个实例，如下所示：

  var content = $('.limit:first').text();
  

  ---

  您将得到正确的文本：
  Doing

  var content=$（'.limit'）.text（）把这三段文字都记下来，这就是为什么你会看到这个句子的3倍
  
  您可以使用函数
  .data（）
  存储每个元素的文本，然后在单击按钮时获取文本
  
  这里有一把小提琴：
  
  在doc ready上，它将通过以下循环遍历每个
  .limit
  ：
  
  $('.limit').each(function(){
      $(this).data('content', $(this).text())
      $(this).data('limit', $(this).text().substring(0, 40))
      $(this).text( $(this).data('limit'))
  })
  
  然后单击获取存储的相应数据：
  
  $('.more').click(function() { 
  
      var $this = $(this);
      var elP = $this.siblings('p');
      var length = elP.text().length;
  
      if(length == 40){
  
          elP.text(elP.data('content'));
  
      }
      else {
          elP.text(elP.data('limit'));
      }
  
  });
  
  您也可以在段落上设置一行文本的高度，并使用css文本溢出来隐藏其余文本，而不是将文本存储在变量中。然后单击显示全文。在这里拉小提琴：
  
  CSS
  
  .limit {
      text-overflow:ellipsis;
      overflow:hidden;
      line-height:1.5em;
      height:1.5em;;
      white-space: nowrap;
  }
  
  jquery
  
   $(document).ready(function {
      var $this = $(this);
      var content = $('.limit').text();
      var limit = content.substring(0, 40);
  
      $('.limit').text(limit);    
  
      $('.more').click(function() { 
  
          var $this = $(this);
          var test = $this.siblings('p').text();
          var length = test.length;
  
          if(length == 40){
  
              $this.siblings('p').text(content);
  
          }
          else {
  
              $this.siblings('p').text(limit);
          }
  
      });
   });
  
  $(".more").click(function(){
      if (! $(this).hasClass('less')){
          $(this).addClass('less').prev('.limit').removeClass('limit').addClass('nolimit');
          $(this).children('p').text('Close');
      } else {
          $(this).removeClass('less').prev('.nolimit').removeClass('nolimit').addClass('limit');
          $(this).children('p').text('Read More');
      }  
  });
  
  谢谢，但我应该澄清的内容将是动态的，所以这种方法不会工作，谢谢！明白了，我只是想指出错误在哪里。正如Karl的回答所建议的那样，您可能最终不得不使用数据函数。非常感谢！这很有道理，而且对于使用
  .data（）
  我应该想到这一点，非常感谢您的帮助，尽管非常感谢！