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

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');

});