如何基於頁面上的按鈕創建進度欄？

Question

我的頁面上有23個以上的按鈕，可以減少或增加。 我如何計算所有按鈕並根據按鈕的狀態更改創建進度欄。 只有兩種狀態，一種會增加百分比，另一種會減少。

單擊此處查看我創建的按鈕和進度欄的圖像

這是我的代碼

 $(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; 對於獲得100％ ，如果按鈕小於我必須手動更改4。 但我需要動態地。

任何解決方案表示贊賞！

Answer 1

這是一個有關用戶單擊“提交”或“重新訪問”按鈕時如何使用eventListener更新div樣式屬性的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>