我如何显示隐藏的幻灯片？

我有一个需要帮助的代码。基本上，我有一个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

我如何显示隐藏的幻灯片？

回答

相关问题