負載更多/使用jQuery

Question

問題（S）顯示更少的問題：以下提供的，我遇到的幾個問題，它們分別是：

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

如何糾正這種任何建議和/或想法是極大的讚賞......我已經在這幾個小時，似乎無法弄清楚這是爲什麼發生？

UPDATE：

這裏是一個jsFiddle

更新2：

jsFiddle

安裝此更新，問題＃1已得到糾正與n01ze的幫助

Answer 1

第二小提琴的錯誤，因爲你依靠單一變量x處理兩個不同的計數器發生。

你可以檢查你有多少項目通過計算容器

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

Answer 2

試試這個，在每個容器中裝入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; 
}); 

});