0

我在使用点击事件附加和替换内容时遇到了一些问题。有 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时间，而不是替换最近的div 内的内容，它不起作用，只是将内容放在顶部。 这个想法是每行之后都会有一个 .hidden div，例如单击前 3 个中的一个会将相关内容附加到 的第一个实例中，单击 4 到 6 会将其附加到的第二个实例中等等，但我不知道如何让它工作。.hidden.hidden
.listing-item.hidden.hidden

4

1 回答 1

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 进行了一些更改。

如果您还有其他问题，请告诉我，我会更新此答案。

于 2013-03-17T17:01:00.273 回答