jQuery:追加和替换内容
我在添加和替换单击事件的内容时遇到了一些问题。每行有3个div，在每行之间是一个宽度为100%的隐藏div，单击其中一个div将显示最近的隐藏div，重新加载砖石插件，并在其中附加相关内容。
这里有一个jsfiddle：http://jsfiddle.net/wUEkE/9/
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');
});
});正如你所看到的，我的问题出在当.hidden已经显示的时候，点击一个.listing-item，而不是替换最近的.hidden目录中的内容，它不起作用，只是放在顶部的内容中。
这个想法是在每一行后面都有一个.hidden .listing-item，例如点击前3个div中的一个会将相关内容附加到.hidden的第一个实例中，单击4到6会将其附加到.hidden的第二个实例中，等等，但是我不知道如何让它工作。
回答 1
Stack Overflow用户
发布于 2013-03-18 01:01:00
感谢您提供jsfiddle。我做了一些更改，您可以在这里看到：http://jsfiddle.net/wUEkE/10/
主要问题是您调用了removeClass('hidden')，因此nextAll('.hidden:first')调用对于已经显示的预览列表不起作用(选择器找不到正确的预览列表，因为它不再有“隐藏”类)。
我对其进行了更改，使预览列表始终具有preview-listing类，因此无论它们是否显示，我们都可以轻松地选择它们。另一个缺失的方面是隐藏其他预览列表(如果它已经显示)。这是click处理程序的主体现在的样子：
$('.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');我还将masonry的itemSelector更改为：
'.listings-item, .preview-listing:not(.excluded)'对html和css做了一些修改。
如果你有更多的问题，请告诉我，我会更新这个答案。
https://stackoverflow.com/questions/15462352
复制相似问题
腾讯云开发者
