gpt4 book ai didi

jQuery: append 和替换内容

转载 作者:行者123 更新时间:2023-11-28 13:11:42 25 4
gpt4 key购买 nike

我在使用点击事件 append 和替换内容时遇到了一些问题。有3行的div,每行之间是一个100%宽度的隐藏div,点击其中一个div会显示最近的隐藏div,重新加载masonry插件,并在里面追加相关内容。
这是一个 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 div,它不起作用,只是放在顶部的内容中。
这个想法是在每一行之后都会有一个.hidden div,例如单击前 3 个 .listing-item 中的一个会将相关内容 append 到 的第一个实例中。 hidden,点击 4 到 6 会将其 append 到 .hidden 等的第二个实例中。但我不知道如何让它工作。

最佳答案

感谢您提供 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');

我还将 masonry 的 itemSelector 更改为:

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

并且对 html 和 css 进行了一些更改。

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

关于jQuery: append 和替换内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15462352/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com