js 上一步 下一步 操作

Posted 2021-01-19 Archibald Witwicky

<a id="syb" href="#" style="display: block;" class="btn button-primary">上一步</a>
<a id="syt" href="#" style="display: none" class="btn button-primary">上一题</a>
<a id="xyt" href="#" style="display: none" class="btn button-primary">下一题</a>
<a id="formbtn" href="#" style="display: none" class="btn button-primary">保存</a>

<script>
  $(function() {
    // wtblock_{*} 待显示div class属性 {*} 表示序号，默认从1开始
  
    var wtList = $(".wtList").length; // 记录总个数
    for(var i = 1; i <= wtList + 1; i++) {
      $(".sz_" + i).text(i + "、");
    }
  
    var wtindex = 1;
    if(wtindex === 1) {
      $("#syt").hide();
      $("#formbtn").hide();
    }
    $(".wtblock_1").show();
    $("#xyt").show();
  
    $("#xyt").click(function() {
      ++wtindex;
      if(wtindex === wtList) {
        $("#formbtn").show();
        $("#xyt").hide();
      } else {
        $("#syt").show();
      }
      $(".wtblock_" + (wtindex - 1)).hide();
      $(".wtblock_" + wtindex).show();
      $("#syb").hide();
    });
  
    $("#syt").click(function() {
      --wtindex;
      if((wtindex + 1) === wtList) {
        $("#formbtn").hide();
        $("#xyt").show();
      }
      if(wtindex === 1) {
        $("#syb").show();
        $("#syt").hide();
      }
      $(".wtblock_" + (wtindex + 1)).hide();
      $(".wtblock_" + (wtindex)).show();
    });
  
    $("#formbtn").click(function() {
      var abc = $("#formdata").serializeArray();
      console.log(abc);
    });
  
  })
</script>