Question

我有一个页面，我想显示所有帖子，但是当该页面加载时，将仅显示3个帖子，并且当单击更多链接时，每个帖子描述将具有越来越多的切换链接，但是将显示完整描述，但单击较少时，将只显示较少的职位描述字符...

单击时有一个更多加载按钮，它将使用ajax jquery从php页面中一次检索帖子四次，并追加到mydonation-con div ...

问题是，当页面被加载时，页面上将显示四个帖子，并且越来越少的链接将起作用，但是当单击“加载更多”按钮时，接下来的三个帖子将从php页面获取，但是文本我存储在span标记中以便显示完整说明的内容已从以前的帖子中删除，并且没有显示完整说明，但是正在处理当前检索到的帖子。

HTML代码：

<div class="compaign-con">
    <div class="don-container" id="mydonation-con" ></div>
    <div class="show-btn">
        <button id="load-more-btn" onclick=loadData() class="btn show-com-btn" data-page="-1">Load More</button>
    </div>
</div>

JS代码（jQuery）

window.onload=function(){
    loadData();
}

function set_currentPage(page){
    var loadMorebtn = document.getElementById('load-more-btn');
    loadMorebtn.setAttribute('data-page',page); 
}

function loadData(){

    var page = parseInt(loadMorebtn.getAttribute("data-page"));
    var next_page = page + 1;
    $.ajax({
        url : "serverphp_files/get_donations.php?next_page="+next_page,
        method : "GET",
        success : function(response){
            var text = $('#mydonation-con').append(response);
            // var more = $(text).find('.more');
            var more = $(text).find('.more');
            moreText(more);
            set_currentPage(next_page);
            }
         })

         function moreText(more){
             var more = $('#mydonation-con').find('.more');
             var showChar = 150;
             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, 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;
    });
}

PHP代码：

<?php
session_start();
$conn = mysqli_connect("localhost","root","","blood_donation");
require "date.php"; 
$limit = 4;

$page = $_GET['next_page'];

$start = $page * 4;

$query_select = mysqli_query($conn,"SELECT donation_compaigns . *,profile.* 
                                    FROM donation_compaigns,profile 
                                    WHERE donation_compaigns.userId = profile.userId order by com_id desc limit " 
                                    . $start.','.$limit);

if(isset($_SESSION['userId'])){
    $user_name_select = mysqli_query($conn,"select * from profile where userId=$_SESSION[userId]");
    while($myName = mysqli_fetch_array($user_name_select)){
        $username = $myName['username'];
    }
}

//if(isset($_GET['next_page'])){
//$nextPage = $_GET['next_page'];
//$query = mysqli_query($conn,"select * from donation_compaigns limit 0,4");?>
<?php while($rec= mysqli_fetch_array($query_select)){ ?>

<div id="delete-com<?php echo $rec['com_id'] ?>">
    <div class="con-inner" id="con-inner">
        <div class="image-con float-left hidden-xs">
            <!--<img src="images/event_1.jpg" height="300px" class="img-responsive" width="220px" />-->
            <img src="serverphp_files/compaign_pics/<?php echo $rec['image']; ?>" height="300px" class="img-responsive" width="220px" />
        </div>
        <?php $id = md5($rec['com_id']); ?>
        <div class="text-con text-con2 float-left" id="myCom<?php echo $id ?>">
        <div class="date"><?php echo $rec['date']; ?></div>
        <h3><?php echo $rec['title']; ?></h3>
        <p class="more"><?php echo $rec['compaign_description']; ?></p>
        <div class="name-and-date"  >Posted By <a href=""><?php echo $rec['username'] ?></a> &nbsp;&nbsp;&nbsp;
            <span>
                <?php echo get_timeago(strtotime($rec['dateAgo']));?> 
            </span>
        </div>
<?php if(isset($_SESSION['userId']) && $_SESSION['userId']==$rec['userId']) { ?>
<div class="button-edit-delete">
<form action="edit_compaign_page.php" method="post">
  <input type="hidden" value="<?php echo $rec['title']; ?>"  name="title" />
  <input type="hidden" value="<?php echo $rec['compaign_description'] ?>" name="description"/>
  <input type="hidden" value="<?php echo $rec['image'] ?>" name="image" />
  <input type="hidden" value="<?php echo $rec['com_id']?>" name="com_id" />
  <input type="submit" class="btn btn-edit-delete" name="submit" value="Edit" />
  <button type="button" class=" btn btn-delete" onclick="deleted(<?php echo $rec['com_id']; ?>)">Delete</button>
  </form>



</div>

<?php }  ?>
</div>
</div>


<div class="clearfix"></div>



</div>
<?php } ?>

在jquery

0 个答案: