Question

我想隐藏父div并显示父父的下一个div（同一个类）。

<div class="collections">
<div class="switchswitch"> 
<span>title</span>
<span class="switch middle">
<img class="wp-post-image" src="image.jpg">
</span>
</div>

<div class="switchswitch"> 
<span>title</span>
<span class="switch middle">
<img class="wp-post-image" src="image.jpg">
</span>
</div>

<div class="switchswitch"> 
<span>title</span>
<span class="switch middle">
<img class="wp-post-image" src="image.jpg">
</span>
</div>

</div>

...... css：

.switchswitch {
    display: none;
}
.selected{
    display: block;
}

...和js：

$('.wp-post-image').click(function(){
    var $next = $('.switchswitch').removeClass('selected').parent('.collections').next('.section')
    if ($next.length) {
    $next.addClass('selected'); 
    }
    else {
        $(".switchswitch:first").addClass('selected');
    }
});

它应该是一个循环，每次我点击“wp-post-image”类的图像时，父div“switchswitch”应该被隐藏，下一个“switchswitch”应该出现..

Answer 1

尝试

$('.wp-post-image').click(function(){
    var $next = $(this).closest('.switchswitch').removeClass('selected').closest('.collections').next().find('.switchswitch')
    if ($next.length) {
    $next.addClass('selected'); 
    }
    else {
        $(".switchswitch:first").addClass('selected');
    }
});

Answer 2

原始脚本遍历.collections元素，然后搜索标记中不存在的下一个.section。

<强>的Javascript

$('.wp-post-image').click(function(){
    var $curSection = $(this).closest(".switchswitch");        
    $curSection.removeClass('selected');
    var $next =  $curSection.next(".switchswitch");
    if ($next.length) {
        $next.addClass('selected'); 
    }
    else {
        $(".switchswitch:first").addClass('selected');
    }
});

工作示例： http://jsfiddle.net/GJp3k/

Answer 3

试试这个

$('.wp-post-image').click(function() {
                var $next = $(this).parent().parent().removeClass('selected').next('.switchswitch');
                    if ($next.length) {
                        $next.addClass('selected');
                    }
                    else {
                        $(".switchswitch:first").addClass('selected');
                    }
                });

简单的显示和隐藏元素与父母下一步

3 个答案: