javascript - 使用 jquery 加载更多/显示更少问题

Question

问题:在下面提供，我遇到了一些问题，它们是:

1.) $('.resume_container_item:lt(' + x + ')').show();所在位置，就是仅显示第一个容器中的前 4 个元素 - 它应该显示所有容器中的前 4 个元素。

2.) if 语句在这里

if (x == size_item) { // ISSUE LIES HERE - For some reason, it does not want to fade out once reached...
    $('.resume_view_more').fadeOut(250);
}

============================================= ==========================

至于 css，我有 .resume_container_item 和 .resume_show_less 类作为 display: none;

完整代码如下:

size_item = $('.resume_container_item').size();
x = 4;
$('.resume_container').each(function( index ) {
  $(this).children('.resume_container_item:lt(' + x + ')').show(); 
}); // Fixed with help from n01ze
$('.resume_view_more').click(function() {
  var $parent = $(this).parent();
  x = (x + 4 <= size_item) ? x + 4 : size_item;
  $parent.find('.resume_container_item:lt(' + x + ')').slideDown();
  $parent.find('.resume_show_less').fadeIn(500);
  if (x == size_item) { // ISSUE LIES HERE - For some reason, it does not want to fade out once reached...
    $('.resume_view_more').fadeOut(250);
  }
  return false;
});
$('.resume_show_less').click(function() {
  var $parent = $(this).parent();
  x = (x - 4 < 4) ? 4 : x - 4;
  $parent.find('.resume_container_item').not(':lt(' + x + ')').slideUp();
  $parent.find('.resume_view_more').fadeIn(500);
  if (x == 4) {
    $('.resume_show_less').fadeOut(250);
  }
  return false;
});

非常感谢任何关于如何纠正此问题的建议和/或想法...我已经处理了几个小时，似乎无法弄清楚为什么会发生这种情况...

更新:

这是一个jsFiddle

更新 2:

jsFiddle

通过此更新，问题 #1 已在 n01ze

的帮助下得到纠正

Answer 1

第二个 fiddle 中的错误发生是因为您依赖单个变量 x 来处理两个不同的计数器。

您可以通过计算容器中的 :visible 元素来检查显示了多少项

$('.resume_view_more').click(function() {
  var $parent = $(this).parent();
  var size_item = $parent.children('.resume_container_item').size();
  var tmp_x = $parent.children('.resume_container_item:visible').size();
  tmp_x = (tmp_x + 4 <= size_item) ? tmp_x + 4 : size_item;
  $parent.find('.resume_container_item:lt(' + tmp_x + ')').slideDown();
  $parent.find('.resume_show_less').fadeIn(500);
  if (tmp_x == size_item) { 
    $parent.children('.resume_view_more').fadeOut(250);
  }
  return false;
});

Fiddle这里