リストの最後の3つの項目を非表示jQuery

Question

私は自分のサイトのすべての関連記事を取得してサイドバーに表示するための基本機能を作成しています。この後、私は3つではなくすべてを隠し、次に「もっと見る」ボタンを表示します。もっと見るボタンをクリックすると、さらに3つの関連するポストが表示されます。すべての投稿が表示されたら、ボタンは 'view less'に変更され、このボタンをクリックすると最後の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定義：

説明：インデックスよりも小さいインデックスですべての要素を選択します一致したセット内で

：未満の略 LTは、それがshownよりすべてのインデックスが低く選択されます。

インデックスは0からNになり、ハイガーのみになります。

代わりに：gtを使用して、動作するかどうかを確認してください。