单击当前按钮时无法设置计数器

Posted

技术标签:

【中文标题】单击当前按钮时无法设置计数器【英文标题】：Unable to set the counter when clicking on the current button 【发布时间】：2021-11-01 04:36:03 【问题描述】：

我有 5 个步骤，其中包含上一个、当前和下一个按钮以及它下面的计数器。我可以在上一个、当前和下一个按钮的帮助下向前和向后移动。但是，我在柜台面临问题。我正在考虑步骤 3 是当前步骤。当我单击“当前”按钮时，我可以返回到第 3 步，但计数器没有达到 3，而是采用最后一步编号。请检查代码并帮助我解决问题。

var current = 1,
          current_step, next_step, steps;
        steps = $("fieldset").length;
        var fieldset_count = steps.current;
        if (current == '1') 
          // $('#first-step a').add('disabled');
          $('#first-step a.previous').prop('disabled', true);
        ;
        if ($('fieldset').hasClass('last-step')) 
          $('#last-step a.next').prop('disabled', true);
        


        $(".next").on("click", function () 
          current_step = $(this).parent("fieldset");
          next_step = $(this).parent("fieldset").next();
          next_step.show();
          current_step.hide();
          $('.counter-step').html(function (i, val) 
            return val * 1 + 1
          );

        );

        $(".previous").on("click", function () 
          current_step = $(this).parent("fieldset");
          next_step = $(this).parent("fieldset").prev();
          next_step.show();
          current_step.hide();
          $('.counter-step').html(function (i, val) 
            return val * 1 - 1
          );
        );

        // Current button functionality
        $(".current").on("click",function()
          current_step = $(this).parent("fieldset");
          next_step = $("#current-step");
          next_step.show();
          current_step.hide();
          var current_counter = $(this).parent("fieldset").attr('value');
          $('.counter-step').text(current_counter);
        );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
    integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

  <link rel="stylesheet" href="/css/icofont/icofont.min.css">

</head>
<style>
  .container fieldset:not(:first-of-type) 
    display: none;
  
</style>


<body>

  <div class="container">
    <fieldset id="first-step" value="1">
      <h4 class="mb-3 header">Step-1</h4>
      <a type="button" name="previous" class="previous btn btn-secondary" value="Previous">Previous</a>
      <a type="button" name="current" class="current btn btn-success" value="Current">Current</a>
      <a type="button" name="next" class="next btn btn-primary" value="Next">Next</a>
    </fieldset>
    <fieldset value="2">
      <h4 class="mb-3 header">Step-2</h4>
      <a type="button" name="previous" class="previous btn btn-secondary" value="Previous">Previous</a>
      <a type="button" name="current" class="current btn btn-success" value="Current">Current</a>
      <a type="button" name="next" class="next btn btn-primary" value="Next">Next</a>
    </fieldset>
    <fieldset value="3" id="current-step">
      <h4 class="mb-3 header">Step-3</h4>
      <a type="button" name="previous" class="previous btn btn-secondary" value="Previous">Previous</a>
      <a type="button" name="current" class="current btn btn-success" value="Current">Current</a>
      <a type="button" name="next" class="next btn btn-primary" value="Next">Next</a>
    </fieldset>
    <fieldset value="4" >
      <h4 class="mb-3 header">Step-4</h4>
      <a type="button" name="previous" class="previous btn btn-secondary" value="Previous">Previous</a>
      <a type="button" name="current" class="current btn btn-success" value="Current">Current</a>
      <a type="button" name="next" class="next btn btn-primary" value="Next">Next</a>
    </fieldset>
    <fieldset class="last-step" id="last-step" value="4">
      <h4 class="mb-3 header">Step-5</h4>
      <a type="button" name="previous" class="previous btn btn-secondary" value="Previous">Previous</a>
      <a type="button" name="current" class="current btn btn-success" value="Current">Current</a>
      <a type="button" name="next" class="next btn btn-primary" value="Next">Next</a>
    </fieldset>
    <p>Viewing Step <span class="counter-step">1</span> of <span class="final-step">23</span></p>
  </div>






    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
      integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
      integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous">
    </script>

</body>

</html>

【问题讨论】：

【参考方案1】：

您单击的当前按钮位于您当前所在的活动字段集中，而不是 value='3' 字段集中。正在单击的按钮的“this”上下文正在拉动隐藏之前可见的字段集的父级，而不是之后显示的字段集。

尝试传递next_step.attr('value') 而不是$(this).parent("fieldset").attr('value')

【讨论】：

【参考方案2】：

下面是最终代码。

var current = 1,
          current_step, next_step, steps;
        steps = $("fieldset").length;
        var fieldset_count = steps.current;
        if (current == '1') 
          // $('#first-step a').add('disabled');
          $('#first-step a.previous').prop('disabled', true);
        ;
        if ($('fieldset').hasClass('last-step')) 
          $('#last-step a.next').prop('disabled', true);
        


        $(".next").on("click", function () 
          current_step = $(this).parent("fieldset");
          next_step = $(this).parent("fieldset").next();
          next_step.show();
          current_step.hide();
          $('.counter-step').html(function (i, val) 
            return val * 1 + 1
          );

        );

        $(".previous").on("click", function () 
          current_step = $(this).parent("fieldset");
          next_step = $(this).parent("fieldset").prev();
          next_step.show();
          current_step.hide();
          $('.counter-step').html(function (i, val) 
            return val * 1 - 1
          );
        );

        // Current button functionality
        $(".current").on("click",function()
          current_step = $(this).parent("fieldset");
          next_step = $("#current-step");
          next_step.show();
          current_step.hide();
          var current_counter = next_step.attr('value');
          $('.counter-step').text(current_counter);
        );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
    integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

  <link rel="stylesheet" href="/css/icofont/icofont.min.css">

</head>
<style>
  .container fieldset:not(:first-of-type) 
    display: none;
  
</style>


<body>

  <div class="container">
    <fieldset id="first-step" value="1">
      <h4 class="mb-3 header">Step-1</h4>
      <a type="button" name="previous" class="previous btn btn-secondary" value="Previous">Previous</a>
      <a type="button" name="current" class="current btn btn-success" value="Current">Current</a>
      <a type="button" name="next" class="next btn btn-primary" value="Next">Next</a>
    </fieldset>
    <fieldset value="2">
      <h4 class="mb-3 header">Step-2</h4>
      <a type="button" name="previous" class="previous btn btn-secondary" value="Previous">Previous</a>
      <a type="button" name="current" class="current btn btn-success" value="Current">Current</a>
      <a type="button" name="next" class="next btn btn-primary" value="Next">Next</a>
    </fieldset>
    <fieldset value="3" id="current-step">
      <h4 class="mb-3 header">Step-3</h4>
      <a type="button" name="previous" class="previous btn btn-secondary" value="Previous">Previous</a>
      <a type="button" name="current" class="current btn btn-success" value="Current">Current</a>
      <a type="button" name="next" class="next btn btn-primary" value="Next">Next</a>
    </fieldset>
    <fieldset value="4" >
      <h4 class="mb-3 header">Step-4</h4>
      <a type="button" name="previous" class="previous btn btn-secondary" value="Previous">Previous</a>
      <a type="button" name="current" class="current btn btn-success" value="Current">Current</a>
      <a type="button" name="next" class="next btn btn-primary" value="Next">Next</a>
    </fieldset>
    <fieldset class="last-step" id="last-step" value="4">
      <h4 class="mb-3 header">Step-5</h4>
      <a type="button" name="previous" class="previous btn btn-secondary" value="Previous">Previous</a>
      <a type="button" name="current" class="current btn btn-success" value="Current">Current</a>
      <a type="button" name="next" class="next btn btn-primary" value="Next">Next</a>
    </fieldset>
    <p>Viewing Step <span class="counter-step">1</span> of <span class="final-step">23</span></p>
  </div>






    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
      integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
      integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous">
    </script>

</body>

</html>

【讨论】：

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。

以上是关于单击当前按钮时无法设置计数器的主要内容，如果未能解决你的问题，请参考以下文章

计数按钮事件

按下本地反应按钮无法正常工作

HTML / Javascript按钮单击计数器

Excel中怎么怎么显示科学计数法？

Haskell Persistent Library - 如何从我的数据库中获取数据到我的前端？

个人 github 页面上的数据库