Question

在我的页面上，我有包含动态内容的文章。

我使用两个jQuery脚本来过滤它们

//Load more // less
  $(document).ready(function () {
  $('#article-list article:gt(10)').hide();
  $('#loadMore').click(function () {
  $('#article-list article:hidden:lt(2)').show();
      });
    });
    //hide articles with no image
  $('.myClass').each(function(){
       if($(this).attr('src') === ""){
          $(this).closest('article').hide();
       }
    });

在第一次加载时，我看到10篇文章都带有图片。

但是当我点击加载更多时，它会再加载2篇文章，但我看到没有图片的文章。

如何合并这两个代码，以便在我点击加载更多内容时隐藏没有图像的文章

Answer 1

你知道你需要重复使用它，所以写一个函数：

function hideArticlesWithNoImages(){ 
   $('.myClass').each(function(){
      if($(this).attr('src') === undefined || $(this).attr('src') === ''){
         $(this).closest('article').hide();
      }
   });
}

然后参考：

$(document).ready(function () { 
   $('#article-list article:gt(10)').hide();
   $('#loadMore').click(function () {
      $('#article-list article:hidden:lt(2)').show();
      hideArticlesWithNoImages();
    });
   hideArticlesWithNoImages();
});

Answer 2

您可以将没有图像的文章分类并过滤

  $(document).ready(function () {
    $('#article-list article:gt(10)').hide();
    $('#loadMore').click(function () {
      $('#article-list article:not(.noimg):hidden:lt(2)').show();
    });
  //hide articles with no image
    $('.myClass').each(function(){
      if($(this).attr('src') === ""){
        $(this).closest('article').addClass('noimg').hide();
      }
    });
  });

带有动态内容的页面上的jQuery脚本

2 个答案: