问题:如下所示,我遇到了一些问题,它们是:
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:
通过此更新,问题#1已在 n01ze
的帮助下得到纠正答案 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此处