javascript - 在同一链接的两个功能之间切换

Question

如您所见，我正在尝试制作“显示更多/更少”按钮。

1. 我将折叠段落设置为默认状态。
2. 点击“显示更多”按钮展开该段落。
3. 该段落已展开。
4. 点击“减少显示”按钮不起作用

HTML:

<div class="wrapper">
   <!--Start Para-->
    <div class="para">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, libero voluptatem sunt voluptate est sint, laboriosam ab facilis recusandae dolorem fuga accusamus, aperiam nam sequi veniam. Provident fugit nobis adipisci consequatur beatae, perspiciatis molestias quam officiis odit consectetur! Sapiente, tempore, nesciunt. Recusandae assumenda natus iste placeat illo. Dignissimos ea, sed suscipit asperiores quidem alias quam earum, tempore, nihil eius aliquam sit, accusantium enim at! Exercitationem nesciunt deleniti, ipsa aut ab rerum, harum voluptatem dolore optio architecto dolores? Fugit id ipsam sit dolores distinctio. Aliquam dolores aliquid sit soluta error ut magnam minima animi qui necessitatibus! Sequi quae, expedita iusto dolorem.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, libero voluptatem sunt voluptate est sint, laboriosam ab facilis recusandae dolorem fuga accusamus, aperiam nam sequi veniam. Provident fugit nobis adipisci consequatur beatae, perspiciatis molestias quam officiis odit consectetur! Sapiente, tempore, nesciunt. Recusandae assumenda natus iste placeat illo. Dignissimos ea, sed suscipit asperiores quidem alias quam earum, tempore, nihil eius aliquam sit, accusantium enim at! Exercitationem nesciunt deleniti, ipsa aut ab rerum, harum voluptatem dolore optio architecto dolores? Fugit id ipsam sit dolores distinctio. Aliquam dolores aliquid sit soluta error ut magnam minima animi qui necessitatibus! Sequi quae, expedita iusto dolorem.</p>
    </div> <!--END para-->
</div> <!--END wrapper-->

$(document).ready(function() {
    var mainPara = $(".para").children("p"),
        longPara = mainPara.html().substr(0),
        shortPara = mainPara.html().substr(0, 380);
    mainPara.html(shortPara).append("...<a class='linkBtn more' href='#'>show more</a>");

    $(".linkBtn").each(function() {
        $(this).click(function(){
            $(this).parent().html(longPara).append("<a class='linkBtn less' href='#'>show less</a>");
        });
    });
});

Answer 1

你在这里有一点误解，你没有按段落保持唯一性，因为你只保存了你的变量中第一个的html。

你需要做的是循环浏览这些段落，让每个段落知道它有哪些长文本和短文本。这就是我的代码中 data 函数的作用。

您还需要使用 jquery on 的事件委托(delegate)，以便将点击事件绑定(bind)到动态添加的显示更多/更少链接。

$(document).ready(function(){

  $(".para").children("p").each(function(index,item)
  {
      var shortText = $(this).html().substr(0, 380);
      var originalText = $(this).html();
    
      if(originalText.length > 380)
      {
        // save the original paragraph html in the paragraph data
        $(this).data('long_p', originalText);
        $(this).data('short_p', shortText);
        
        $(this).html(shortText + "...<a class='linkBtn more' href='#'>show more</a>");
      }
     
    }); 
    
     
    $('p').on('click','.linkBtn', function(){
    
        var para = $(this).closest('p');
      
        if($(this).hasClass('more'))
        {
          
            para.html(para.data("long_p") + "...<a class='linkBtn less' href='#'>show less</a>");
        }
        else
        {
             para.html(para.data("short_p") + "...<a class='linkBtn more' href='#'>show more</a>");         
        }
    
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
   <!--Start Para-->
    <div class="para">
        <p>No need for show more paragraph one</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, libero voluptatem sunt voluptate est sint, laboriosam ab facilis recusandae dolorem fuga accusamus, aperiam nam sequi veniam. Provident fugit nobis adipisci consequatur beatae, perspiciatis molestias quam officiis odit consectetur! Sapiente, tempore, nesciunt. Recusandae assumenda natus iste placeat illo. Dignissimos ea, sed suscipit asperiores quidem alias quam earum, tempore, nihil eius aliquam sit, accusantium enim at! Exercitationem nesciunt deleniti, ipsa aut ab rerum, harum voluptatem dolore optio architecto dolores? Fugit id ipsam sit dolores distinctio. Aliquam dolores aliquid sit soluta error ut magnam minima animi qui necessitatibus! Sequi quae, expedita iusto dolorem.123</p>
        <p><b>I am a unique paragraph and my text shall stay unique.</b> Rem, libero voluptatem sunt voluptate est sint, laboriosam ab facilis recusandae dolorem fuga accusamus, aperiam nam sequi veniam. Provident fugit nobis adipisci consequatur beatae, perspiciatis molestias quam officiis odit consectetur! Sapiente, tempore, nesciunt. Recusandae assumenda natus iste placeat illo. Dignissimos ea, sed suscipit asperiores quidem alias quam earum, tempore, nihil eius aliquam sit, accusantium enim at! Exercitationem nesciunt deleniti, ipsa aut ab rerum, harum voluptatem dolore optio architecto dolores? Fugit id ipsam sit dolores distinctio. Aliquam dolores aliquid sit soluta error ut magnam minima animi qui necessitatibus! Sequi quae, expedita iusto dolorem.456</p>
    </div> <!--END para-->
</div> <!--END wrapper-->