Question

我正在为我的网站创建一个基本功能，它可以获取所有相关帖子并将其显示在我的侧边栏中。在此之后，我隐藏了所有这些，但是3然后显示“查看更多”按钮，当单击视图更多按钮时它会显示另外3个相关帖子。当所有帖子都显示后，按钮变为“查看更少”，如果单击此按钮，则应删除最后3个帖子，但此时它会删除前3个帖子。

这是我的代码：

   <div class="col-md-5">
      <h4>Method</h4>
      <?php echo $rows['steps']; ?>
    </div>
    <div class="col-md-3">
      <h2> Related Recipes </h2>
      <ul class="related-recipes">
      <?php 
      $recipeNumber = 0;
      foreach ($related_recipes as $related_recipe) { ?>
        <li>
          <h4><?php echo $related_recipe['recipe_name']; ?></h4>
          <a href="single-recipe.php?id=<?php echo $related_recipe['recipe_id']; ?>"><img src="<?php echo $related_recipe['recipe_image'];?>" style="width:50%; height:50%;"/></a>
        <?php $recipeNumber++; } ?>
        </li>
      </ul>
      <?php if ( $recipeNumber  > 3 ) { ?>
          <button id="more-recipes" class="view-more" type="button">View More</button>
          <button id="less-recipes" class="view-less" type="button" >View Less</button>
      <?php } ?>
      </div>
  </div>
</div>

    <script>

    $(document).ready(function () {
        $('.related-recipes li:lt(3)').show(); 
        var shown = 3;
        var items = <?php echo $recipeNumber ; ?>;
          $('.view-more').on('click',function() {

            shown = $('.related-recipes li:visible').size()+3;

            $('.related-recipes li:lt('+shown+')').fadeIn(1000);

            if (shown == items) {

                $('#less-recipes').show();

                $( "#more-recipes").hide();

            }

          });

          $('.view-less').on('click',function() {

            shown = $('.related-recipes li:visible').size()-3;

            $('.related-recipes li:lt('+shown+')').fadeOut(1000);

            if (shown < items) {

                $('#less-recipes').hide();

                $( "#more-recipes").show();

            }

          });            
    });

 <style>
      .related-recipes li {
          display:none;
      }

      #less-recipes {
        display:none;
      }

</style>

Answer 1

您正在使用

$('.related-recipes li:lt('+shown+')').fadeOut(1000);

jQuery定义:lt定义：

描述：选择匹配集中索引小于索引的所有元素。

：代表小于，它将选择低于shown的所有索引。

索引从0到N，只会变得更高。

尝试使用：gt ，看看它是否有效。

隐藏列表jQuery中的最后3项

1 个答案: