Javascript 当父div可见时，使用jquery切换div

我有几个具有相同类的父div标记，其中包含两个子div，其中一个是隐藏的。一次只显示一个父级。我有一个按钮，通过显示下一个按钮和隐藏上一个按钮一次通过父按钮。第二个按钮必须在其可见时切换父项的两个子项div，但它仅适用于第一个父项，而不适用于其他父项。。请在下面的html样本。。非常感谢你的帮助。。谢谢

<div class="parent"   >
<div id="child1">  text  </div> 
<div id="child2" style="display:none">  text  </div> 
</div>
<div class="parent" style="display:none"  >
<div id="child1">  text  </div> 
<div id="child2" style="display:none">  text  </div> 
</div>
<div class="parent"  style="display:none" >
<div id="child1">  text  </div> 
<div id="child2" style="display:none">  text  </div> 
</div>

}))

用于切换每个当前可见父div的子级的按钮的脚本

$('.txtFlip').on('click', function(event) {
 $('.parent:visible > #child1').slideToggle();
 $('.parent:visible > #child2').slideToggle();
});

我现在的问题是为每个当前可见的父对象切换child1和child2的脚本。它只适用于第一个父对象，而不适用于其他父对象。请帮忙

---

谢谢……

您可以使用jQuery的：可见选择器来选择当前可见的元素，并基于此进行切换

bindLoopThrough = function($button, initial_selector){
    // Define a function that will apply for both sets of buttons,
    // because they have similar functionality
    $button.on("click", function(){
        var $current = $(initial_selector),
            $next = $current.next();
        if($next.length===0){
            $next = $current.siblings().eq(0); // Reached end, get first.
        }
        $current.hide();
        $next.show();
    });
}

bindLoopThrough($("#button1"), ".parent:visible");
bindLoopThrough($("#button2"), ".parent:visible .child:visible");

---

共享您当前的脚本。。如果可能的话，jsfiddle将非常好，因为它是def。不工作是因为您有多个具有相同ID的div。ID是唯一的，因此只能有一个具有相同ID。请您提供您的js代码，以便我能够识别问题所在。对不起，我离开了一段时间。我还没有找到解决问题的办法。我可以在父div中移动，但在移动不同的父div时无法切换child1和child2。。请查找附在上面的我的脚本快照：

bindLoopThrough = function($button, initial_selector){
    // Define a function that will apply for both sets of buttons,
    // because they have similar functionality
    $button.on("click", function(){
        var $current = $(initial_selector),
            $next = $current.next();
        if($next.length===0){
            $next = $current.siblings().eq(0); // Reached end, get first.
        }
        $current.hide();
        $next.show();
    });
}

bindLoopThrough($("#button1"), ".parent:visible");
bindLoopThrough($("#button2"), ".parent:visible .child:visible");