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

时间:2016-03-14 04:44:54

标签: javascript jquery html css

问题:如下所示,我遇到了一些问题,它们是:

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

的帮助下得到纠正

2 个答案:

答案 0 :(得分:1)

试试这个,在每个容器中加载4个项目,

//$('.resume_container_item:lt(' + x + ')').show();  //Comment this line

$('.resume_container').each(function( index ) {
  $( this ).children('.resume_container_item:lt(' + x + ')').show(); 
});

编辑2:第2点

在你的循环中使用

$('.resume_view_more').click(function() {
  var $parent = $(this).parent();
  size_item = $parent.children('.resume_container_item').size(); //This will fix it

..... rest codes

$parent.children('.resume_view_more').fadeOut(250); //Try this to hide specific link

最终代码

$(document).ready(function () {
/*!
 *  Author: Michael R. Draemel
 *          http://draemel.com/
 */

size_item = $('.resume_container_item').size();
x = 4;
//$('.resume_container_item:lt(' + x + ')').show(); // ISSUE LIES HERE - Need to figure out how to show first 4 items in each container
$('.resume_container').each(function( index ) {
  $( this ).children('.resume_container_item:lt(' + x + ')').show();
  var chld_size = $(this).children('.resume_container_item').size();

  if(chld_size <= x) {
   $(this).children('.resume_view_more').hide();
   $(this).children('.resume_show_less').hide();
  }
});
$('.resume_view_more').click(function() {
  var $parent = $(this).parent();
  size_item = $parent.children('.resume_container_item').size(); //This will fix it
  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...
    $parent.children('.resume_view_more').fadeOut(250);
  }
  return false;
});
$('.resume_show_less').click(function() {
  var $parent = $(this).parent();
  size_item = $parent.children('.resume_container_item').size(); //This will fix it
  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);
   $parent.children('.resume_show_less').fadeOut(250);
  }
  return false;
});

});

答案 1 :(得分:1)

第二小提琴中的错误发生是因为您依靠单个变量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此处