Question

我的页面上有23个以上的按钮，可以减小或增大它们。我如何计算所有按钮并根据按钮的状态更改创建进度栏。状态只有两种，一种会增加百分比，另一种会减少。

点击here以查看我创建的按钮和进度条的图像

这是我的代码

 $(document).ready(function() {
    var form_count = 1;

    setProgressBar(form_count);

    function setProgressBar(curStep) {
      var i = 0;
      $.each($('input[type=submit]'), function() {
        if ($(this).val() == 'Revisit') {
          i++;
        }
      });
      var total = i * 4;
      var percent = total;
      percent = Math.floor(percent);
      if (percent > 100) {
        percent = 100;
      }
      $(".progress-bar")
        .css("width", percent + "%")
        .html(percent + "%");
    }
  });

此代码工作正常，但我需要动态地使用它。

这是我执行相同代码的所有按钮的HTML代码

   <div class="col-md-6">
      <div class="frmWrp">
        <form method="post" action="">
          <div class="heading">Quality Assurance</div>
          <div class="btn pull-right">
            <?php if ($feature_enable[0]['qa_mod'] == 1) { ?>
            <input type="submit" class="btn btn-default" name="user_configration1" value="<?php echo ($checkExist[0]['quality_assurance'] == 1) ? 'Revisit' : 'Visit'; ?>">
            <?php } else { ?>
            <button class="btn btn-default" disabled>Feature Not Enabled</button>
            <?php } ?>
          </div>
        </form>
      </div>
    </div>

例如，现在我有25个按钮，而我做 var total = i * 4; ，如果按钮少于我，我必须手动更改4个，以获得 100％ 。但我需要动态地这样做。

任何解决方案表示赞赏！

Answer 1

关于用户单击“提交”或“重新访问”按钮时如何使用eventListener更新div的style属性的width属性的一般想法：

// Identifies the progress bar
const progressBar = document.getElementsByClassName("progressBar")[0];

// Calls the `setProgressBar` function when the user clicks something
document.addEventListener("click", setProgressBar);

// Defines the `setProgressBar` function
function setProgressBar(event) {

  // Makes sure the click was on an `input` element with the `submit` type before proceeding
  if(
    event.target.tagName == "INPUT" &&
    event.target.getAttribute("type") == "submit"
  ){

    // Toggles the value of the clicked input element
    if(event.target.value == "Revisit"){ event.target.value = "Submit"; }
    else{ event.target.value = "Revisit"; }

    // Bascially the same as your original code -- updates the progressBar
    let i = 0;
    $.each($('input[type=submit]'), function() {
      if ($(this).val() == 'Revisit') { i++; }
    });
    const percent = Math.min(i * 25, 100);
    $(".progressBar").css("width", percent + "%").html(percent + "%");

  }
}

#container{ width: 10ch; }
input[type=submit]{ margin-bottom: 0.2em; }
.progressBar{ height: 20px; background-color: yellow; width: 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container">
  <input type="submit" value="Submit" />
  <input type="submit" value="Submit" />
  <input type="submit" value="Submit" />
  <input type="submit" value="Submit" />
</div>

<div class = "progressBar"></div>

如何基于页面上的按钮创建进度栏？

1 个答案: