當父div可見時使用jquery切換div

我有幾個父類div標籤，它們包含兩個子div，其中一個隱藏。一次只顯示一位家長。我有一個按鈕，通過顯示下一個並隱藏前一個按鈕，一次移動父按鈕。第二個按鈕有切換父的兩個孩子的div時，其可見的，但它僅適用於第一個父，而不是其他..請下面的示例HTML ...幫助深表感謝..謝謝當父div可見時使用jquery切換div

<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>

腳本通過父移動： $（函數（）{

$(".parent:first").fadeIn(); // show first step 

$("#next-step").val('Continue'); 
$("#back-step").hide().click(function() { 
    var $step = $(".parent:visible"); 
    if ($step.prev().hasClass("parent")) { // is there any previous step? 
     $step.hide().prev().fadeIn(); // show it and hide current step 
    } 
}); 

$("#next-step").click(function() { 
    var $step = $(".parent:visible"); 
    if ($step.next().hasClass("parent")) { 
     $step.hide().next().fadeIn(); 
     $("#back-step").show(); // recall to show backStep button 
    } 
    else { // this is last step, submit form 
     //$("#next-step").hide(); 
     $("form").submit(); 
    } 

});

}）;

腳本按鈕來切換孩子每個當前可見父DIV

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

我現在的問題是切換child1和的child2每個當前可見父腳本。它只適用於第一位父母，但不適用於其他人。幫助PLZ ...

感謝......

來源

2013-11-15 abeku

分享自己當前的腳本..如果可能的jsfiddle將是巨大的http://jsfiddle.net/ –

它的高清原因。不工作的是你有多個具有相同ID的div。 ID是唯一的，所以只能有一個ID相同。 – cubrr

您能否請您提供您的js代碼，以便我可以確定問題 – jagruti

您可以使用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");

來源

2013-11-15 06:48:10 Alphadelta14

當父div可見時使用jquery切換div

回答

相關問題