Jquery隐藏/显示加载更多按钮

时间:2011-11-14 11:14:34

标签: javascript jquery css button show-hide

我有一个脚本,见下文:

索引页面:jQuery脚本

<script type="text/javascript">
        $(document).ready(function(){
            $("#loadmorebutton").click(function (){
                $('#loadmorebutton').html('<img src="ajax-loader.gif" />');
                $.ajax({
                    url: "loadmore.php?lastid=" + $(".postitem:last").attr("id"),
                    success: function(html){
                        if(html){
                            $("#postswrapper").append(html);
                            $('#loadmorebutton').html('Load More');
                        }else{
                            $('#loadmorebutton').replaceWith('<center>No more posts to show.</center>');
                        }
                    }
                });
            });
        });
    </script>

HTML:

<div id="wrapper">
<div id="postswrapper">
<?php 
    $getlist = mysql_query("SELECT * FROM table_name LIMIT 25"); 
    while ($gl = mysql_fetch_array($getlist)) { ?>
         <div class=postitem id="<? echo $gl['id']; ?>"><?php echo $gl['title']; ?></div>
    <?php } ?>
</div>
<button id="loadmorebutton">Load More</button>
</div>
</div>

loadmore.php页面有;

<?php 
$getlist = mysql_query("SELECT * FROM table_name WHERE id < '".addslashes($_GET['lastid'])."' 
LIMIT 0, 25 LIMIT 10"); 
while ($gl = mysql_fetch_array($getlist)) { ?>
<div><?php echo $gl['title']; ?></div>
<?php } ?>

基本上这个脚本的作用是,索引页面将从数据库加载前25个项目,当你点击加载更多时,它会触发 loadmore.php ,这将加载10个以上从最后加载的id开始的数据。我想要做的是从屏幕上删除“加载更多”按钮如果数据库中少于25个项目并显示数据库中是否有超过25个项目。

4 个答案:

答案 0 :(得分:3)

这对你有用:

<?php 
    $getlist = mysql_query("SELECT * FROM table_name LIMIT 25"); 
    while ($gl = mysql_fetch_array($getlist)) { ?>
         <div class=postitem id="<? echo $gl['id']; ?>"><?php echo $gl['title']; ?></div>
    <?php } 
    if(mysql_num_rows($getlist) <= 25) { ?>
    <script type="text/javascript">
        $(function(){
             $('#loadmorebutton').hide();
        });
    </script>
    <?php } ?>

答案 1 :(得分:1)

<div id="wrapper">
<div id="postswrapper">
<?php 
    $getlist = mysql_query("SELECT * FROM table_name LIMIT 25"); 
    **$cnt = 0;**
    while ($gl = mysql_fetch_array($getlist)) { ?>
         <div class=postitem id="<? echo $gl['id']; ?>"><?php echo $gl['title']; ?></div>
         **$cnt++;**
    <?php } ?>
</div>
**<?php if ($cnt == 24) { ?>
<button id="loadmorebutton">Load More</button>
<?php } ?>**
</div>
</div>

答案 2 :(得分:1)

将您的php脚本更改为count变量

<div id="wrapper"> 
<div id="postswrapper"> 
<?php 
$count=0;
$getlist = mysql_query("SELECT * FROM table_name LIMIT 25"); 
while ($gl = mysql_fetch_array($getlist)) {
 $count++;?> 
<div class=postitem id="<? echo $gl['id']; ?>"><?php echo $gl['title']; ?></div> 
<?php } ?> 
</div> 
<button id="loadmorebutton" value="<? echo $count ?>">Load More</button> 
</div> 
</div>

<script type="text/javascript"> 
        $(document).ready(function(){ 
            $("#loadmorebutton").click(function (){ 
                $('#loadmorebutton').html('<img src="ajax-loader.gif" />'); 
                $.ajax({ 
                    url: "loadmore.php?lastid=" + $(".postitem:last").attr("id"), 
                    success: function(html){ 
                        if(html){ 
                            $("#postswrapper").append(html);                
                            var count = patserInt($('#loadmorebutton').val()); 
                if(count<25){
                        $('#loadmorebutton').html('Load More'); 
                        }else {
                            $('#loadmorebutton').hide();


                        }else{ 
                            $('#loadmorebutton').replaceWith('<center>No more posts to show.</center>'); 
                        } 
                    } 
                }); 
            }); 
        }); 
    </script> 

答案 3 :(得分:0)

我会给你两个选项,以你们更具可读性为准。

<?php if(25 or more){ ?>
  <button id="loadmorebutton">Load More</button>
<?php } ?>

<?php if(25 or more): ?>
  <button id="loadmorebutton">Load More</button>
<?php endif; ?>