Question

我有一个代码，我需要帮助。基本上，我有一个有4张幻灯片的面板。我使用代码$（＆＃34; .two＆＃34;）隐藏第二张幻灯片.delech（）;.我试图实现的目标是：当我选中幻灯片1中的复选框时，第二张幻灯片应该在选择＆＃34;下一步＆＃34; （基本上没有跳过第二张幻灯片）。否则第二张幻灯片会跳过。如何在幻灯片1中选中复选框时如何显示幻灯片2？

我尝试使用append（）以第二张幻灯片定位复选框，但2幻灯片面板仍然隐藏。（如果我大吼大叫，请解释为什么我将来可以在论坛上进行改进。）谢谢你的时间！

＆＃13;

$(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	
            .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			
          if ($newFieldset.is(':first-child')) {
            $panelControlButtons
              .filter('.btnPrev')
              .prop('disabled', true);
          }
          break; // btn Prev

      }

    }); // panelcontrol button handler 

  /*skips panel two*/
  $(".two").detach();
});

＆＃13;

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

＆＃13;

Answer 1

您可以使用解决方案

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

我无法执行您的代码，因此我尝试使用自己的代码。

希望这会对你有所帮助。

如何显示隐藏的幻灯片？

1 个答案: