Question

我的代码需要帮助。

因此，我有一个“阅读更多”功能，但该按钮上始终有“阅读更多”文本，我需要使“阅读更多”-“阅读较少”文本，如何添加“阅读较少”单击后将文本发送到我的代码？

这是我的观点：

join

这是我的剧本：

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

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>

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

2 个答案: