我如何顯示隱藏的幻燈片？

我有一個需要幫助的代碼。基本上，我有一個4幻燈片面板。我使用代碼$（「。two」）。detach（）;隱藏第二張幻燈片。我試圖達到的目標是：當我檢查幻燈片1中的複選框時，第二張幻燈片應該在選擇「下一步」時顯示（基本上不跳過第二張幻燈片）。否則第二張幻燈片會跳過。如何在選擇幻燈片1中的複選框時顯示幻燈片2？我如何顯示隱藏的幻燈片？

我試着用第二張幻燈片使用append（）定位複選框，但2幻燈片面板仍然保持隱藏狀態。（如果我大拇指向下，請解釋爲什麼我可以在將來的論壇中改進。）謝謝你的時間！

$(document).ready(function() { 
 
    var $fieldsets = 
 
    $('#panels .sets') 
 
    .first() 
 
    .addClass('active') 
 

 
    .end() 
 
    .not(':first') 
 
    .hide() 
 
    .end(); 
 
    $(':nth-child(3)').removeClass("active").css('display', 'none'); 
 
    var $panelControlButtons = 
 
    $('#panelcontrol button') 
 
    .filter('.btnPrev') 
 
    .prop('disabled', true) 
 
    .end(); 
 

 

 
    $('#panelcontrol') 
 
    .on('click', 'button', function(e) { 
 
     e.preventDefault(); 
 

 
     switch (true) { 
 
     case $(this).hasClass('btnNext'): 
 
      var $newFieldset = 
 
      $fieldsets 
 
      .filter('.active') 
 
      .hide() 
 
      .removeClass('active') 
 
      .next() 
 
      .addClass('active') 
 
      .show(); 
 

 

 
      //enable Prev button 
 
      $panelControlButtons 
 
      .filter('.btnPrev') 
 
      .prop('disabled', false); 
 

 
      //disabled Next button 
 
      if ($newFieldset.is(':last-child')) { 
 
      $panelControlButtons 
 
       .filter('.btnNext') 
 
       .prop('disabled', true); 
 
      } 
 

 
      break; // btnNext 
 
      var $input = 
 
      $('input') 
 
      .filter('.active') 
 
      .end(); 
 
     case $(this).hasClass('btnPrev'): 
 
      var $newFieldset = 
 
      $fieldsets 
 
      .filter('.active') //selects the current fieldset 
 
      .hide() //hide it \t 
 
      .removeClass('active') //remove active flag 
 
      .prev() //move to the previous fieldset 
 
      .addClass('active') //flag as active 
 
      .show(); //and show it 
 

 
      // enable Next button 
 
      $panelControlButtons 
 
      .filter('.btnNext') 
 
      .prop('disabled', false); 
 

 
      // disable Prev button \t \t \t 
 
      if ($newFieldset.is(':first-child')) { 
 
      $panelControlButtons 
 
       .filter('.btnPrev') 
 
       .prop('disabled', true); 
 
      } 
 
      break; // btn Prev 
 

 
     } 
 

 
    }); // panelcontrol button handler 
 

 
    /*skips panel two*/ 
 
    $(".two").detach(); 
 
});

<!doctype html> 
 
<html lang="engl"> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
    <link href="https://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet"> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <link rel="stylesheet" href="simplegrid.css"> 
 
    <script src="jquery/main.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>Stylus Simulator</title> 
 
</head> 
 

 
<body> 
 
    <div id="container"> 
 
    <div id="panels"> 
 
     <div class="sets"> 
 
     <h1>PANEL 1</h1> 
 
     <form action=""> 
 
      <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> 
 
      <input type="checkbox" name="vehicle" value="Car">I have a car 
 
     </form> 
 
     <div><input type="text" name="ss1" value="" /></div> 
 
     </div> 
 
     <div class="sets two"> 
 
     <h1>PANEL 2</h1> 
 
     <div><input name="ss2" value="" /></div> 
 
     </div> 
 
     <div class="sets"> 
 
     <h1>PANEL 3</h1> 
 
     </div> 
 
     <div class="sets"> 
 
     <h1>PANEL 4</h1> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div id="panelcontrol"> 
 
    <button class="btnPrev">Prev</button> 
 
    <button class="btnNext">Next</button> 
 
    </div> 
 
    <script type="text/javascript" src="jquery-3.2.1.js"></script> 
 
</body> 
 

 
</html>

來源

2017-09-26 ricky

在這裏，你去了一個解決方案

$(document).ready(function() { 
 
var skipPanel2 = true; 
 
function enableDisablePrevNex(){ 
 
    if($('.active').index() === 0){ 
 
    $('.btnPrev').prop('disabled', 'disabled'); 
 
    $('.btnNext').removeAttr('disabled'); 
 
    if($('input[name="vehicle"]').is(':checked')){ 
 
     skipPanel2 = false; 
 
    } else { 
 
     skipPanel2 = true; 
 
    } 
 
    } else if($('.active').index() === 3){ 
 
    $('.btnNext').prop('disabled', 'disabled'); 
 
    $('.btnPrev').removeAttr('disabled'); 
 
    } else { 
 
    $('.btnPrev, .btnNext').removeAttr('disabled'); 
 
    } 
 
} 
 
    
 
//Initial Call 
 
enableDisablePrevNex(); 
 
    
 
$('input[name="vehicle"]').change(function(){ 
 
    if($(this).is(':checked')) 
 
    skipPanel2 = false; 
 
}); 
 
    
 
$('.btnNext').click(function(){ 
 
    slideNext(); 
 
}); 
 
    
 
$('.btnPrev').click(function(){ 
 
    var activeSet = $('.active').index(); 
 
    $('.sets:nth-child(' + (activeSet + 1) + ')').removeClass('active'); 
 
    $('.sets:nth-child(' + activeSet + ')').addClass('active'); 
 
    enableDisablePrevNex(); 
 
}); 
 
    
 
function slideNext(){ 
 
    var activeSet = $('.active').index(); 
 
    if(activeSet === 0){ 
 
    if(skipPanel2){ 
 
     $('.sets:nth-child(' + (activeSet + 1) + ')').removeClass('active'); 
 
     $('.sets:nth-child(' + (activeSet + 3) + ')').addClass('active'); 
 
    } else { 
 
     $('.sets:nth-child(' + (activeSet + 1) + ')').removeClass('active'); 
 
     $('.sets:nth-child(' + (activeSet + 2) + ')').addClass('active'); 
 
    } 
 
    } else { 
 
    $('.sets:nth-child(' + (activeSet + 1) + ')').removeClass('active'); 
 
    $('.sets:nth-child(' + (activeSet + 2) + ')').addClass('active'); 
 
    } 
 
    enableDisablePrevNex(); 
 
} 
 
});

.sets { 
 
    display: none; 
 
} 
 

 
.active { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div id="panels"> 
 
     <div class="sets active"> 
 
     <h1>PANEL 1</h1> 
 
     <form action=""> 
 
      <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> 
 
      <input type="checkbox" name="vehicle" value="Car">I have a car 
 
     </form> 
 
     <div><input type="text" name="ss1" value="" /></div> 
 
     </div> 
 
     <div class="sets"> 
 
     <h1>PANEL 2</h1> 
 
     <div><input name="ss2" value="" /></div> 
 
     </div> 
 
     <div class="sets"> 
 
     <h1>PANEL 3</h1> 
 
     </div> 
 
     <div class="sets"> 
 
     <h1>PANEL 4</h1> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div id="panelcontrol"> 
 
    <button class="btnPrev">Prev</button> 
 
    <button class="btnNext">Next</button> 
 
    </div>

我無法執行你的代碼，所以我想用我自己的代碼。

希望這會幫助你。

來源

2017-09-26 03:36:08 Shiladitya

非常感謝。但是，當選中複選框時，它將跳轉到面板2.我的目標是在默認情況下跳過面板2（使用面板2上的detatch（））。然後，當檢查複選框時，detatch（）被移除並能夠看到面板兩個。我嘗試了很多方法來嘗試顯示第二個面板，而detatch（）將其定位。如果您有其他選擇，請隨時通知我。謝謝！ – ricky

@ricky我已根據要求更新了答案，請看一看並告訴我， – Shiladitya

這很好。但是，根據我發佈的示例，我是否可以將示例代碼的一部分用於當前代碼中？我試着添加你發佈的部分代碼，但它沒有處理。我猜我必須使用整個JavaScript示例。我爲我的不便表示歉意。謝謝 – ricky

我如何顯示隱藏的幻燈片？

回答

相關問題