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}}，我必须设置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>

谢谢，

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>

Answer 2

您可以在不使用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

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

2 个答案: