使用jquery加载更多/显示更少的问题 [英] Load More / Show Less issues using jquery

问题描述

问题：下面提供了我遇到的几个问题，它们是：

1 。）其中 $（'。resume_container_item：lt（'+ x +'）'）。show（）; 位于，它只显示第一个第一个容器中有4个项目 - 它应显示所有容器中的前4个项目。

2。） 如果语句在这里

  if（x == size_item）{// ISSUE LIES这里 - 由于某种原因，它不希望一旦淡出...... 
 $（'。resume_view_more'）。fadeOut（250）; 
} 
  

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

至于CSS，我有 .resume_container_item 和 .resume_show_less 类为 display：none;

code：

  size_item = $（'。resume_container_item'）。size（）; 
 x = 4; 
 $（'。resume_container'）。each（function（index）{
 $（this）.children（'。resume_container_item：lt（'+ x +'）'）。show（）; 
}）; //在n01ze 
 $（'。resume_view_more'）。的帮助下修正。click（function（）{
 var $ parent = $（this）.parent（）; 
x =（x + 4  $ parent.find（'。resume_container_item：lt（'+ x +'）'）。slideDown（）; 
 $ parent.find（ '.resume_show_less'）。fadeIn（500）; 
 if（x == size_item）{// ISSUE LIES HERE  - 出于某种原因，它不希望一旦淡出...... 
 $ （'.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（'。 fadeIn（500）; 
 if（x == 4）{
 $（'。resume_show_less'）。fadeOut（250）; 
} 
 return false; 
}）; 
  

有关如何解决此问题的任何建议和/或想法非常感谢......我一直在这几个小时，似乎无法弄清楚为什么会发生这种情况......

更新：

以下是 jsFiddle

更新2：

jsFiddle

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

解决方案

在第二个小提琴中发生的错误是因为您依靠单个变量 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）; 
} 
返回false; 
}）; 
  

小提琴在这里

Question(s): Provided below, I am encountering a few issues, they are:

1.) where $('.resume_container_item:lt(' + x + ')').show(); is located, it is only showing the first 4 items in the first container - it should show the first 4 items in all containers.

2.) the if statement here

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

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

As for the css, I have the .resume_container_item and the .resume_show_less classes as display: none;

Here is the full code:

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;
});

Any suggestions and/or thoughts on how to correct this is greatly appreciated...I've been at this for hours and can't seem to figure out why this is occurring...

UPDATE:

Here is a jsFiddle

UPDATE 2:

jsFiddle

With this update, issue #1 has been corrected with the help of n01ze

解决方案

The error in the second fiddle occurs because you rely on a single variable x to handle two different counters.

You can check how many items you are showing by counting :visible elements within the container

$('.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 here

这篇关于使用jquery加载更多/显示更少的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！