1

目前我所做的是我使用 Jquery 就绪函数从数据库中加载数据，而不是刷新页面。我面临的问题是我使用了字数限制来显示阅读更多选项来显示剩余的消息。由于我使用了间隔函数，因此它会一次又一次地加载内容。有什么想法或解决方案可以帮助我吗？

提前致谢。

加载数据的脚本

<script>
 $(document).ready(function(){
  $('#box').show();
  setInterval(function(){
   $('#show').load('get_post.php');
   $('#box').hide();
  }, 3000)
 })
</script>

get_post.php 文件

<?php



require_once('../dbconn.php');


$sql = "
SELECT post_id
     , post_title
     , post_cat
     , post_sub_cat
     , post_skill
     , post_company
     , post_location
     , post_type
     , post_price
     , post_message
     , user_pic
     , user_name
     , post_user_id
     , post_time
  FROM user_post
 ORDER 
    BY post_id DESC 
 LIMIT 1
";

$stmt = mysqli_prepare($conn, $sql);
//mysqli_stmt_bind_param($stmt3,"ss", $uid, $u_id);

$result = mysqli_stmt_execute($stmt);
mysqli_stmt_store_result($stmt);
mysqli_stmt_bind_result($stmt, $p_id, $p_title, $p_cat, $p_sub_cat, $p_skill, $p_company, $p_location ,$p_type, $p_price, $p_message, $p_user_pic, $p_user_name, $p_user_id, $p_post_time);

while ($row = mysqli_stmt_fetch($stmt)) 
{




    date_default_timezone_set("Asia/Colombo");

    $time_ago = strtotime($p_post_time);

    include_once('time_ago.php');




?>



<div class="post-bar">
    <div class="post_topbar">
        <div class="usy-dt">
            <img src="http://via.placeholder.com/50x50" alt="">
            <div class="usy-name">
                <h3><?php echo $p_user_name;?></h3>
                <span><img src="images/clock.png" alt=""><?php echo timeAgo($time_ago);?></span>
            </div>
        </div>
        <div class="ed-opts">
            <a href="#" title="" class="ed-opts-open"><i class="la la-ellipsis-v"></i></a>
            <ul class="ed-options">
                <li><a href="#" title="">Edit Post</a></li>
                <li><a href="#" title="">Unsaved</a></li>
                <li><a href="#" title="">Unbid</a></li>
                <li><a href="#" title="">Close</a></li>
                <li><a href="#" title="">Hide</a></li>
            </ul>
        </div>
    </div>

    <div class="epi-sec">
        <ul class="descp">
            <li><img src="images/icon8.png" alt=""><span><?php echo $p_company;?></span></li>
            <li><img src="images/icon9.png" alt=""><span><?php echo $p_location;?></span></li>
        </ul>
        <ul class="bk-links">
            <li><a href="#" title=""><i class="la la-bookmark"></i></a></li>
            <li><a href="#" title=""><i class="la la-envelope"></i></a></li>
        </ul>
    </div>

    <div class="job_descp">
        <h3><?php echo $p_title;?></h3>
        <ul class="job-dt">
            <li><a href="#" title=""><?php echo $p_type;?></a></li>
            <li><span><?php echo $p_price;?> / hr</span></li>
        </ul>

        <p class="show-read-more"><?php echo $p_message;?></p>

        <ul class="skill-tags">

        <?php


            $categories = '';
            $cats = explode(" ", $p_skill);
            foreach($cats as $cat) {
                $cat = trim($cat);
                $categories .= "<li><a href='#'' title=''>" . $cat . "</a></li>\n";

            }

            echo $categories;



        ?>

            <!--
            <li><a href="#" title="">HTML</a></li>
            <li><a href="#" title="">PHP</a></li>
            <li><a href="#" title="">CSS</a></li>
            <li><a href="#" title="">Javascript</a></li>
            <li><a href="#" title="">Wordpress</a></li>     -->
        </ul>
    </div>

    <div class="job-status-bar">
        <ul class="like-com">
            <li>
                <a href="#"><i class="la la-heart"></i> Like</a>
                <img src="images/liked-img.png" alt="">
                <span>25</span>
            </li> 
            <li><a href="#" title="" class="com"><img src="images/com.png" alt=""> Comment 15</a></li>
        </ul>
        <a><i class="la la-eye"></i>Views 50</a>
    </div>




    <div class="comment-section">


        <div class="post-comment">

            <div class="cm_img">
                <img src="http://via.placeholder.com/40x40" alt="">
            </div>

            <div class="comment_box">
                <form>
                    <input type="text" placeholder="Post a comment">
                    <button type="submit">Send</button>
                </form>
            </div>
        </div><!--post-comment end-->
    </div>

</div><!--post-bar end-->

阅读更多选项脚本

<script>
 $(document).ready(function(){
  var maxLength = 100;
  $(".show-read-more").each(function(){
    var myStr = $(this).text();
    if($.trim(myStr).length > maxLength){
        var newStr = myStr.substring(0, maxLength);
        var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
        $(this).empty().html(newStr);
        $(this).append(' <a href="javascript:void(0);" class="read-more">read more...</a>');
        $(this).append('<span class="more-text">' + removedStr + '</span>');
    }
});
$(".read-more").click(function(){
    $(this).siblings(".more-text").contents().unwrap();
    $(this).remove();
});

});

4

0 回答 0