php - 如何在php中使用数据库中的数据设置“阅读更多”按钮

Question

实际上我正在使用 laravel 框架。在其中我使用某些查询和方法从数据库检索数据..

下面是我的代码

<ul class="booking-list">
    @foreach($aRooms as $aRoom)
        <li>
        ....
            <div class="comment more">
                {{$aRoom->room_desc}}
            </div>
        ....
        </li>
    @endforeach
</ul>

有很多内容要显示，例如 {{$aRoom->room_desc}}。但是通过使用这个 {{$aRoom->room_desc}} 我必须设置阅读更多 阅读更少切换选项。

如果数据来自数据库，我不知道如何使用 jQuery 设置它

这是我的 jQuery，

<script>
$(document).ready(function() {
    var showChar = 100;
    var ellipsestext = "...";
    var moretext = "More (+)";
    var lesstext = "Less (-)";
    $('.more').each(function() {
        var content = $(this).html();

        if(content.length > showChar) {

            var c = content.substr(0, showChar);
            var h = content.substr(showChar-1, content.length - showChar);

            var html = c + '<span class="moreelipses">'+ellipsestext+'</span>&nbsp;<span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">'+moretext+'</a></span>';

            $(this).html(html);
        }

    });

    $(".morelink").click(function(){
        if($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });
});
</script>

谢谢

Answer 1

我明白了.. using this link

<ul class="booking-list">
    @foreach($aRooms as $aRoom)
    <li>
        ....
        <div class="comment more">
            @if(strlen($aRoom->room_desc) > 100)
            {{substr($aRoom->room_desc,0,100)}}
            <span class="read-more-show hide_content">More<i class="fa fa-angle-down"></i></span>
            <span class="read-more-content"> {{substr($aRoom->room_desc,100,strlen($aRoom->room_desc))}} 
            <span class="read-more-hide hide_content">Less <i class="fa fa-angle-up"></i></span> </span>
            @else
            {{$aRoom->room_desc}}
            @endif
            ....
    </li>
    @endforeach
</ul>

Javascript

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
// Hide the extra content initially, using JS so that if JS is disabled, no problemo:
            $('.read-more-content').addClass('hide_content')
            $('.read-more-show, .read-more-hide').removeClass('hide_content')

            // Set up the toggle effect:
            $('.read-more-show').on('click', function(e) {
              $(this).next('.read-more-content').removeClass('hide_content');
              $(this).addClass('hide_content');
              e.preventDefault();
            });

            // Changes contributed by @diego-rzg
            $('.read-more-hide').on('click', function(e) {
              var p = $(this).parent('.read-more-content');
              p.addClass('hide_content');
              p.prev('.read-more-show').removeClass('hide_content'); // Hide only the preceding "Read More"
              e.preventDefault();
            });
</script>

为此，我在 css 文件中使用了一些样式

<style type="text/css">
    .read-more-show{
      cursor:pointer;
      color: #ed8323;
    }
    .read-more-hide{
      cursor:pointer;
      color: #ed8323;
    }

    .hide_content{
      display: none;
    }
</style>