用於閱讀更多按鈕

重用jQuery的功能我有一個jQuery的功能，象這樣：現在用於閱讀更多按鈕

var readMore = jQuery(document).ready(function() { 

    $("#toggle").click(function() { 
    var elem = $("#toggle").text(); 
    if (elem == "Read More") { 
     //Stuff to do when btn is in the read more state 
     $("#toggle").text("Read Less"); 
     $(".text").slideDown(); 
    } else { 
     //Stuff to do when btn is in the read less state 
     $("#toggle").text("Read More"); 
     $(".text").slideUp(); 
    } 
    }); 
});

，這個功能顯然執行讀更多的按鈕的行爲和工作正常。但是，有一個小問題。我希望能夠在一個頁面上重複使用該功能以獲得多個按鈕和文本，這是我的目標，但目前它只在一段文本上執行該功能。我聽說我也無法使用身份證，因爲#toggle，原因是因爲「我不能重用身份證，我需要將其轉換爲類。」

功能在HTML中使用像這樣：

Quisque interdum accumsan metus, at iaculis libero vestibulum vel. <span class="text">Sed dapibus mollis justo, sit amet efficitur tortor laoreet et. In risus sapien, eleifend eget ullamcorper vel, sodales a odio. Phasellus ultricies volutpat luctus.</span> 
<button class="button jkit-btn-inverse" id="toggle">Read More</button>

的<span class="text">就是文本切斷，並隱藏了跨度讀更多的功能，裏面的一切，使它看起來按下按鈕後。我可以在一個區域使用它，而不是在多個區域。

我該如何去重用這個函數？

編輯：

關於第一個答案，更換全部的ID與類不工作，但是，我只能在一個區域使用它。如果我嘗試在另一個區域使用另一個段落和另一個按鈕，它根本不起作用。

來源

2017-09-18 Jordan Savell

變化ID要Class同樣以HTML Code

HTML

<div class="section"> 
     Quisque interdum accumsan metus, at iaculis libero vestibulum vel. <span class="text">Sed dapibus mollis justo, sit amet efficitur tortor laoreet et. In risus sapien, eleifend eget ullamcorper vel, sodales a odio. Phasellus ultricies volutpat luctus.</span> 
     <button class="button jkit-btn-inverse toggle">Read More</button> 
    </div> 
    <div class="section"> 
     Quisque interdum accumsan metus, at iaculis libero vestibulum vel. <span class="text">Sed dapibus mollis justo, sit amet efficitur tortor laoreet et. In risus sapien, eleifend eget ullamcorper vel, sodales a odio. Phasellus ultricies volutpat luctus.</span> 
     <button class="button jkit-btn-inverse toggle">Read More</button> 
    </div> 
    <div class="section"> 
     Quisque interdum accumsan metus, at iaculis libero vestibulum vel. <span class="text">Sed dapibus mollis justo, sit amet efficitur tortor laoreet et. In risus sapien, eleifend eget ullamcorper vel, sodales a odio. Phasellus ultricies volutpat luctus.</span> 
     <button class="button jkit-btn-inverse toggle">Read More</button> 
    </div>

jQuery的

var readMore = jQuery(document).ready(function() { 

      $(".section .toggle").click(function() { 
       var elem = $(this).text(); 
       if (elem == "Read More") { 
        //Stuff to do when btn is in the read more state 
        $(this).text("Read Less"); 
        $(this).parent().find('.text').slideDown(); 
       } else { 
        //Stuff to do when btn is in the read less state 
        $(this).text("Read More"); 
        $(this).parent().find('.text').slideUp(); 
       } 
      }); 
     });

CSS

span.text { 
      display: none; 
     }

https://jsfiddle.net/4jfzdwLb/

來源

2017-09-18 10:57:04

編輯：對不起，這根本不起作用，我已經試過了。 –

添加代碼js小提琴 –

https://jsfiddle.net/4jfzdwLb/ –

用於閱讀更多按鈕

回答

相關問題