Question

我正在尝试让我的页面的进度条动态更新。我得到了那部分工作，但我遇到了问题。首先，当我按下按钮时，计数不断增加。那么，当我在这两个字段上都有相同的更新按钮时，如何阻止它针对该特定字段发生多个？在我的网站上，表单位于不同的选项卡中，这就是我使用相同更新按钮的原因。其次，如果我填写所有输入...计数器增加35而不是15或20。有没有解决方案，我不必每个都有不同的更新按钮？

HTML：

<div class="progress">
  <div class="progress-bar" data-values="40">0</div>
</div>
<form method="post" action="#" class="basicInfo">
  <label>Title:</label>
  <input type="text" id="title" class="form-control required" />
  <br/>
  <label>Price:</label>
  <input type="number" id="price" class="form-control required" />
  <br/>
  <input type="submit" name="submit" value="Update" class="btn" />
</form>
<br />
<form method="post" action="#" class="descriptionInfo">
  <label>Description:</label>
  <input type="text" id="description" class="form-control required" />
  <br/>
  <input type="submit" name="submit" value="Update" class="btn" />
</form>

JS：

$(document).ready(function() {
  var percentage = 10;
  $("[name='submit']").click(function(e) {
    e.preventDefault();
    if ($("#title").val().length > 0 && $("#price").val() > 0) {
      percentage += 20;
      $(".progress-bar").css("width", percentage + "%");
      $(".progress-bar").text(percentage + "%");
    }
    if ($("#description").val().length > 0) {
      percentage += 15;
      $(".progress-bar").css("width", percentage + "%");
      $(".progress-bar").text(percentage + "%");
    }

  });
});

JSFiddle Demo

Answer 1

这是一个累积问题。而不是adding += somevalue，你应该按项目划分百分比：

更新字段时，您需要设置字段值field1_value = 33.3;并更新百分比。

percentage = field1_value + field2_value + field3_value

修改：Added jsfiddle example 确保添加的所有表单值总共为100。：d

更新进度条动态发布

1 个答案: