我在使用点击事件追加和替换内容时遇到了一些麻烦。行中有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');
});
});
正如您所看到的,我的问题在于,当.listing-item
已经显示时点击.hidden
,而不是替换最近的.hidden
div内的内容,它不起作用,仅仅放在顶部的内容中
我们的想法是每行后都会有一个.hidden div,例如点击前3个.listing-item
中的一个会将相关内容附加到.hidden
的第一个实例中,点击4到到6会将它附加到.hidden
等的第二个实例中。但我无法弄清楚如何使其工作。
答案 0 :(得分:0)
感谢您提供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进行了一些更改。
如果您有任何其他问题,请告诉我,我会更新此答案。