单击阅读更多后如何在我的代码上添加阅读更少按钮？

Question

我的代码需要一些帮助。

所以，我有一个“阅读更多”功能，但我在那个按钮上总是有“阅读更多”文本，我需要制作“阅读更多”-“阅读更少”文本，如何添加“阅读更少” " 文本到我的代码，点击后？

这是我的看法：

<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

我为你的问题做了一个sn-p，看看吧：

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>