如何使用 php 中数据库中的数据设置读取更多按钮


How to set read more button using data from database in php

实际上我正在使用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}}我必须设置Read more Read less切换选项。

我不知道如何使用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>

谢谢

我明白了。使用此链接

<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>

爪哇语

<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>

您也可以在不使用JavaScript的情况下完成这些操作。

    <?php 
 $longString = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

        echo readMoreHelper($longString);

        function readMoreHelper($story_desc, $chars = 100) {
            $story_desc = substr($story_desc,0,$chars);  
            $story_desc = substr($story_desc,0,strrpos($story_desc,' '));  
            $story_desc = $story_desc." <a href='#'>Read More...</a>";  
            return $story_desc;  
        } 
     ?> 

                                    **// OR**
<?php
 $story_desc = substr($longString,0,100);  
 $story_desc = substr($story_desc,0,strrpos($story_desc,' '));  
 echo $story_desc."<a href='#'>Read More...</a>";
?>

注意 ://在你的代码中,你必须使用你的变量而不是$longString