單擊閱讀更多后如何在我的代碼上添加閱讀更少按鈕？

Question

我的代碼需要一些幫助。

所以，我有一個“閱讀更多”function，但我總是在那個按鈕上有“閱讀更多”文本，我需要制作“閱讀更多”-“閱讀更少”文本，我怎樣才能將“閱讀更少”文本添加到我的代碼，點擊后？

這是我的看法：

<span class="small2" style="max-height: 120px"  class="col-md-6" align="justify" >{{ $review->review_message }}</span>

這是我的腳本：

$(".small2").each(function () {
    text = $(this).text();
    if (text.length > 200) {
        $(this).html(text.substr(0, 100) + '<span class="elipsis">' + text.substr(100) + '</span><a class="elipsis" href="#">Read more</a>' + 'salut');
    }

});
$(".small2 > a.elipsis").click(function (e) {
    e.preventDefault(); //prevent '#' from being added to the url
    $(this).prev('span.elipsis').fadeToggle(500);
});

Answer 1

請試一試：

$(".small2 > a.elipsis").click(function (e) {
    e.preventDefault(); //prevent '#' from being added to the url
    $(this).prev('span.elipsis').fadeToggle(500);

    if ( $(this).text() == "Read more" )
      $(this).text('Read less');
    else
      $(this).text('Read more');

});

Answer 2

我為你的問題做了一個片段，看看它：

 var readMore = true; $(".small2").each(function () { text = $(this).text(); if (text.length > 200) { $(this).html(text.substr(0, 100) + '<span class="elipsis">' + text.substr(100) + '</span><a class="elipsis" href="#"> Read more</a>'); $('span.elipsis').fadeToggle(10); } }); $(".small2 > a.elipsis").click(function (e) { e.preventDefault(); //prevent '#' from being added to the url $('span.elipsis').fadeToggle(500); $('a.elipsis').text(readMore? 'Read less': 'Read more'); readMore =;readMore; });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span class="small2" style="max-height: 120px" class="col-md-6" align="justify" >sdfjg oshdlbf pisdb fipvsdb fgiphsdb fpvisdb fpihvsbd vspifb dpifhv sdpihfbv asipfhbv asiphfbv aipfsbvpishfv ishafv pias vfphas fvphs dfvp sdpfdpihf pdahvf psahbf jsabf piabfhidbv iphasb pvichasb dpihvab spvi bapifv aspihvdasjfnd[oashvdasdvc ackb vpasihc vpihfc dfhkzjcnv sdz csdkjcba spdjcn aspidbcv asipdb ashid sdfjg oshdlbf pisdb fipvsdb fgiphsdb fpvisdb fpihvsbd vspifb dpifhv sdpihfbv asipfhbv asiphfbv aipfsbvpishfv ishafv pias vfphas fvphs dfvp sdpfdpihf pdahvf psahbf jsabf piabfhidbv iphasb pvichasb dpihvab spvi bapifv aspihvdasjfnd[oashvdasdvc ackb vpasihc vpihfc dfhkzjcnv sdz csdkjcba spdjcn aspidbcv asipdb ashid </span>