jQuery：追加和替換內容

我在添加和替換內容時遇到了一些麻煩，點擊事件。有3個行的div，每行之間是一個寬度爲100％的隱藏div，單擊其中一個div將顯示最接近的隱藏div，重新加載masonry插件，並在其中添加相關內容。
這裏有一個的jsfiddle：http://jsfiddle.net/wUEkE/9/
的jQuery：jQuery：追加和替換內容

$(document).ready(function() { 
var $container = $('#listings-wrap'); 

$(function(){ 
$container.imagesLoaded(function(){ 
    $('#listings-wrap').masonry({ 
    itemSelector : '.listings-item, .preview-listing', 
    columnWidth: 4, 
    gutterWidth: 10, 
    isFitWidth: true, 
    isAnimated: true 
    }); 
}); 
}); 
}); 

$(document).ready(function(){ 

$(".listings-item").click(function() { 

$('.test').hide(); 
    $(this).nextAll('.hidden:first').removeClass('hidden').addClass('preview-listing').append($('#post'+$(this).attr('hook')).show()).hide().delay(400).fadeIn("slow"); 
$('#listings-wrap').masonry('reload'); 
}); 

});

正如你看到的，我的問題，當點擊躺着一個.listing-item時已經顯示的，而不是替換最近.hidden DIV裏面的內容.hidden，這不是」而且只是放在頂部的內容中。
這個想法是，每一行後都會有一個.hidden div，例如點擊前3箇中的一個將相關內容追加到.hidden的第一個實例中，點擊4到6會將其附加到第二個例子.hidden等，但我不知道如何得到這個工作。

來源

2013-03-17 user1374796

如果你點擊4到6，你是否希望1到3的'.hidden'消失，如果它是可見的？ – tcovo 2013-03-17 16:30:34

@tcovo是的，我只想要一次顯示一個'.hidden'，但是在點擊一個'.listing-item'後，如果你點擊另一個，它將無法替換'.hidden'中的div貨櫃 – user1374796 2013-03-17 16:32:38

感謝您提供jsfiddle。我做了一些改變，你可以在這裏看到：http://jsfiddle.net/wUEkE/10/

主要的問題是，你叫removeClass('hidden')，所以nextAll('.hidden:first')呼叫沒有爲它已經被證明預覽上市工作（選擇並沒有找到合適的預覽列表，因爲它不再有「隱藏」類）。

我改變了它，以便預覽列表總是有preview-listing類，所以我們可以輕鬆選擇它們，無論它們是否顯示。另一個缺失的方面是隱藏其他預覽列表，如果它已經顯示。這是單擊處理的機身看起來像現在：

$('.test').hide(); 
var previewForThis = $(this).nextAll('.preview-listing:first'); 
var otherPreviews = $(this).siblings('.preview-listing').not(previewForThis); 
otherPreviews 
    .addClass('excluded') // exclude other previews from masonry layout 
    .hide(); 
previewForThis 
    .removeClass('excluded') 
    .append($('#post' + $(this).attr('hook')).show()) 
    .hide() 
    .delay(400) 
    .fadeIn("slow"); 
$('#listings-wrap').masonry('reload');

我也改變砌築的itemSelector到：

'.listings-item, .preview-listing:not(.excluded)'

，並有一定的變化對HTML和CSS的。

讓我知道你是否有任何問題，我會更新這個答案。

來源

2013-03-17 17:01:00 tcovo

完美！謝謝你，非常感謝，正是我所追求的。 – user1374796 2013-03-17 17:41:30

jQuery：追加和替換內容

回答

相關問題