鉴于
following code:
<div class='hotel_photo_select'>
Hello
</div>
<div class='itsHidden' style='display:none'>
<div class='hotel_photo_select'>
Hello
</div>
</div>
和:
$('.hotel_photo_select').fadeOut(300);
$('.itsHidden').show();
我希望两个.hotel_photo_select div都被隐藏.但是,当我显示容器时,第二个不会被隐藏.
这是一个jQuery错误吗?在fadeOut()之后,每个元素都应该被隐藏.
我认为唯一的解决方案是:
$('.hotel_photo_select').fadeOut(300,function () {
$(this).hide();
});
$('.itsHidden').show();
我发现它不够优雅.
解决方法
从技术上讲,对于这种类型的方法,您需要使用’.each()’.然后还可以添加一个检查点,我们确定父项是否可见,如果它不可见,那么我们将其显示.
但是,使父级可见,可能会对您的布局产生负面影响,YES.但是没有更好的方法可以做到这一点,因此你应该避免这些类型的情况.
实例:http://jsfiddle.net/QMSzg/21/
$('.hotel_photo_select').each(function () {
var this_parent = $(this).parent('div');
if (this_parent.is(':hidden')) {
this_parent.show();
}
$(this).fadeOut(500);
});