【问题标题】:Jquery hide/show load more buttonJquery隐藏/显示加载更多按钮
【发布时间】:2011-12-28 13:49:57
【问题描述】:

我有一个脚本,见下文:

索引页面: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 个。

【问题讨论】:

  • 在 html 周围加上 if。 &lt;?php if(25 or more){ ?&gt;&lt;button id="loadmorebutton"&gt;Load More&lt;/button&gt;&lt;?php } ?&gt;

标签: javascript jquery css button show-hide


【解决方案1】:

这对你有用:

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

【讨论】:

  • 不错的山姆!我试过了,它奏效了……唯一的缺点是隐藏被延迟了。它会在它消失之前显示加载更多按钮几秒钟......所以我更改了代码并改用了css,它工作得很好。即 if(mysql_num_rows($getlist)
  • 还有一个问题……我不想就此提出一个新问题!与 facebook 加载更多不同的是,当没有其他内容可显示时,它会自动更改为 NO MORE TO LOAD...我必须最后一次单击 Load More 按钮,然后它才会检查 loadmore.php 以获取更多项目,如果没有,则显示 NO加载更多...但这可以自动化吗?
  • 嗨,Sam,我刚刚意识到,如果有 0 个项目,则脚本不起作用!它仅在显示至少 1 个项目但不超过指定数量时才有效。我怎样才能满足 0 的结果?
【解决方案2】:
<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>

【讨论】:

    【解决方案3】:

    将您的 php 脚本更改为带有计数变量的变量

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

    【讨论】:

    • 如果我使用

      Load More

      而不是
    • &lt;h3 value="" id="loadmorebutton"&gt;Load More&lt;/h3&gt; 可能有效,但请记住 id 对页面来说是唯一的..
    【解决方案4】:

    我会给你两个选择,哪个对你来说更易读。

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-11-27
      • 1970-01-01
      • 1970-01-01
      • 2019-05-21
      • 2020-02-17
      • 1970-01-01
      相关资源
      最近更新 更多