通过下一个按钮显示下一个字段集

问题描述 投票：0回答：1

尝试使用 

fieldset
创建包含一些动态数据的页面 单击“下一步”按钮时，我应该显示下一个字段集，但不起作用，并且没有显示控制台错误来帮助查找问题

$(document).ready(function() {

  var current_fs, next_fs, previous_fs; //fieldsets
  var opacity;
  var current = 1;
  var steps = $("fieldset").length;

  $(".next").click(function() {

    current_fs = $(this).parent();
    next_fs = $(this).parent().next();

    //show the next fieldset
    next_fs.show();
    //hide the current fieldset with style
    current_fs.animate({
      opacity: 0
    }, {
      step: function(now) {
        // for making fielset appear animation
        opacity = 1 - now;

        current_fs.css({
          'display': 'none',
          'position': 'relative'
        });
        next_fs.css({
          'opacity': opacity
        });
      },
      duration: 500
    });
  });

  $("#msform").on("submit", function(e) { e.preventDefault(); });

});
/*Hide all except first fieldset*/

#msform fieldset:not(:first-of-type) {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<div class="container">
  <!-- main-wrapper start -->
  <main class="main-wrapper">
    <div class="top_barmain">
      <div class="custom_container">
        <div class="top_bar">
          <div class="top_left">
            <input readonly type="text" value="Label">
          </div>
        </div>
      </div>
    </div>
    <form id="msform" class="mr-5 ml-5">
      <!-- fieldsets -->
      <fieldset>
        <div class="custom_container">
          <div class="main_body">
            <div class="main_left">
              <div class="main_upercnt">
                <p>description</p>
              </div>
              <div class="mainleft_box">
                <div class="mainbox_item">
                  <span class="fs-number">1</span> 
                  <p class="fs-title">FIRST Fieldset</p>
                  <h6>description</h6>
                </div>
                <div class="unit_box">
                  <select class="unit">
                    <option>unit</option>
                    <option>unit</option>
                    <option>unit</option>
                    <option>unit</option>
                  </select>
                </div>
                <div class="mainbox_item2">
                  <ul class="sample">
                    <li>Sample:</li>
                    <li>Method:</li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="main_right">
              <div class="f_btn">
                <a class="next action-button" name="next">Next</a>
              </div>
            </div>
          </div>
          <div class="main_bottom">
            <div class="bottom_left">
              <textarea readonly class="notes" placeholder="Notes"></textarea>
            </div>
            <div class="bottom_right">
              <button type="button">
                <img src="" alt="">
              </button>
              <div class="checkitem_box">
                <div class="form-group">
                  <input type="checkbox" id="check1">
                  <label for="check1">Show All </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </fieldset>
      <fieldset>
        <div class="custom_container">
          <div class="main_body">
            <div class="main_left">
              <div class="main_upercnt">
                <p>description</p>
              </div>
              <div class="mainleft_box">
                <div class="mainbox_item">
                  <span class="fs-number">2</span> 
                  <p class="fs-title">SECOND Fieldset</p>
                  <h6>description</h6>
                </div>
                <div class="unit_box">
                  <select class="unit">
                    <option>unit</option>
                    <option>unit</option>
                    <option>unit</option>
                    <option>unit</option>
                  </select>
                </div>
                <div class="mainbox_item2">
                  <ul class="sample">
                    <li>Sample:</li>
                    <li>Method:</li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="main_right">
              <div class="f_btn">
                <a class="next action-button" name="next">Next</a>
              </div>
            </div>
          </div>
          <div class="main_bottom">
            <div class="bottom_left">
              <textarea readonly class="notes" placeholder="Notes"></textarea>
            </div>
            <div class="bottom_right">
              <button type="button">
                <img src="" alt="">
              </button>
              <div class="checkitem_box">
                <div class="form-group">
                  <input type="checkbox" id="check1">
                  <label for="check1">Show All </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </fieldset>
      <!-- /fieldsets -->
    </form>
  </main>
  <!-- main-wrapper end -->
</div>

javascript html fieldset
1个回答
0
投票

你的父母不是这里的字段集

current_fs = $(this).parent();
next_fs = $(this).parent().next();

我改为

$current_fs = $(this).closest("fieldset");
$next_fs = $current_fs.next();

（并添加 $ 前缀以表明它们是 jQuery 对象）

$(document).ready(function() {

  var current_fs, next_fs, previous_fs; //fieldsets
  var opacity;
  var current = 1;
  var steps = $("fieldset").length;

  $(".next").click(function() {

    $current_fs = $(this).closest("fieldset");
    $next_fs = $current_fs.next();

    //show the next fieldset
    $next_fs.show();
    //hide the current fieldset with style
    $current_fs.animate({
      opacity: 0
    }, {
      step: function(now) {
        // for making fielset appear animation
        opacity = 1 - now;

        $current_fs.css({
          'display': 'none',
          'position': 'relative'
        });
        $next_fs.css({
          'opacity': opacity
        });
      },
      duration: 500
    });
  });

  $("#msform").on("submit", function(e) {
    e.preventDefault()
  })

});
/*Hide all except first fieldset*/

#msform fieldset:not(:first-of-type) {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<div class="container">
  <!-- main-wrapper start -->
  <main class="main-wrapper">
    <div class="top_barmain">
      <div class="custom_container">
        <div class="top_bar">
          <div class="top_left">
            <input readonly type="text" value="Label">
          </div>
        </div>
      </div>
    </div>
    <form id="msform" class="mr-5 ml-5">
      <!-- fieldsets -->
      <fieldset>First fieldset
        <div class="custom_container">
          <div class="main_body">
            <div class="main_left">
              <div class="main_upercnt">
                <p>description</p>
              </div>
              <div class="mainleft_box">
                <div class="mainbox_item">
                  <span class="fs-number">1</span> 
                  <p class="fs-title">FIRST Fieldset</p>
                  <h6>description</h6>
                </div>
                <div class="unit_box">
                  <select class="unit">
                    <option>unit</option>
                    <option>unit</option>
                    <option>unit</option>
                    <option>unit</option>
                  </select>
                </div>
                <div class="mainbox_item2">
                  <ul class="sample">
                    <li>Sample:</li>
                    <li>Method:</li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="main_right">
              <div class="f_btn">
                <a class="next action-button" name="next">Next</a>
              </div>
            </div>
          </div>
          <div class="main_bottom">
            <div class="bottom_left">
              <textarea readonly class="notes" placeholder="Notes"></textarea>
            </div>
            <div class="bottom_right">
              <button type="button">
                <img src="" alt="">
              </button>
              <div class="checkitem_box">
                <div class="form-group">
                  <input type="checkbox" id="check1">
                  <label for="check1">Show All </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </fieldset>
      <fieldset>Second fieldset
        <div class="custom_container">
          <div class="main_body">
            <div class="main_left">
              <div class="main_upercnt">
                <p>description</p>
              </div>
              <div class="mainleft_box">
                <div class="mainbox_item">
                  <span class="fs-number">2</span> 
                  <p class="fs-title">SECOND Fieldset</p>
                  <h6>description</h6>
                </div>
                <div class="unit_box">
                  <select class="unit">
                    <option>unit</option>
                    <option>unit</option>
                    <option>unit</option>
                    <option>unit</option>
                  </select>
                </div>
                <div class="mainbox_item2">
                  <ul class="sample">
                    <li>Sample:</li>
                    <li>Method:</li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="main_right">
              <div class="f_btn">
                <a class="next action-button" name="next">Next</a>
              </div>
            </div>
          </div>
          <div class="main_bottom">
            <div class="bottom_left">
              <textarea readonly class="notes" placeholder="Notes"></textarea>
            </div>
            <div class="bottom_right">
              <button type="button">
                <img src="" alt="">
              </button>
              <div class="checkitem_box">
                <div class="form-group">
                  <input type="checkbox" id="check1">
                  <label for="check1">Show All </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </fieldset>
      <!-- /fieldsets -->
    </form>
  </main>
  <!-- main-wrapper end -->
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.