Question

我有一张表格用于计算数字数组的总和和平均值。我正在使用一个按钮来触发表单，然后用户可以添加额外的输入字段以输入任意数量的值。当他们点击“Calc＆＃39;按钮，他们收到总和和平均值的警报。这很好。问题是，当我再次单击触发器关闭然后重新打开表单时，显示与用户选择的输入字段数相同的数量，尽管能够清除它们的值，但我无法清空关联的数组。因此，当用户第二次输入值并尝试执行计算时，先前的值将被添加到这些新值中。

除此之外，我希望动态添加的输入一个在另一个上面，并且对于＆＃39; .remove-field＆＃39; div（或至少包含它的图标）显示在每个输入字段的右侧。我尝试了各种显示值，定位等，但似乎没有什么能产生一致的外观。

这是我的HTML标记：

<button class="form-launch" data-icon="&#xe17f">AVG</button>

<div class="form-space">
<form role="form" action="/wohoo" method="POST" class="form-add-remove">
  <label class="label">Average Calculation</label>
  <div id="horizontal_bar"></div>
    <div class="multi-field-wrapper">
    <div class="add-field"><i class="fa fa-plus-circle"></i></div>
      <div class="multi-fields">
        <div class="multi-field">

         <input type="text" name="stuff[]" class="input-field"/>

         <div class="remove-field"><i class="fa fa-minus-circle"></i></div>

        </div>
      </div>

  </div>

  <button type="button" class="check">Calc</button>
</form>
</div>

我的CSS：

.form-launch {
  position: absolute;
  top: 20px;
  left: 20px;
}

.form-space {
  opacity: 0;
}

.form-add-remove {
  font-family: "DJB Chalk It Up";
  color: #FFF;
  font-size: 30px;
  width: 600px;
  height: 300px;
  padding: 20px;
  border: 2px solid #FFF;
  border-radius: 25px;
  box-shadow: 0px 0px 10px 5px #000;
  background: transparent url("http://mrlambertsmathpage.weebly.com/files/theme/blackboard.jpeg") repeat-y scroll left center;
  text-align: center;
  vertical-align: middle;
  display: inline-flex;
  -moz-box-pack: center;
  justify-content: center;
  align-items: center;
  -moz-box-orient: vertical;
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -300px;
  margin-top: -125px;
  display: inline-block;
}

.label {
  position: absolute;
  top: 20px;
  left: 20px;
}

#horizontal_bar {
  position: absolute;
  top: 60px;
  left: 0px;
  width: 95%;
  height: 4px;
  border-radius: 2px;
  background: #00A2E8 none repeat scroll 0% 0%;
  margin: 2.5%;
  box-shadow: 0px 0px 6px 3px #000, 0px 0px 1px #000 inset;
}

.multi-field-wrapper {
  height: 130px;
  width: 90%;
  padding: 20px;
  margin-left: 0px;
  margin-top: 80px;
  border: 2px dashed rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  transition: all 1.5s ease-in-out 0.5S;
  overflow-y: scroll;
}

.multi-field-wrapper:hover {
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: all 1.5s ease-in-out 0s;
}

.multi-field {
  display: inline-block;
}

.add-field {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

i {
  color: #00a2e8;
}

.calc {
  position: absolute;
  left: 20px;
  bottom: 20px;
}

input {
  font-family: "Borders Divide, But Hearts Shall Conquer";
  border-radius: 5px;
  border: 2px inset rgba(0, 0, 0, 0.4);
  width: 100px;
  text-align: right;
  padding-right: 10px;
}

我的jQuery：

var launchCount = 0;
var arr = [],
  sum = 0;

$('.form-launch').click(function() {
  launchCount++;

  if ((launchCount % 2) == 1) {
    $('.form-space').css('opacity', '1');

    // Initialize Average Form
    $('.multi-field-wrapper').each(function() {
      var $wrapper = $('.multi-fields', this);
      $(".add-field", $(this)).click(function(e) {
        $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
      });
      $('.multi-field .remove-field', $wrapper).click(function() {
        if ($('.multi-field', $wrapper).length > 1)
          $(this).parent('.multi-field').remove();
      });
    });

    $(".calc").click(function() {
      $("input[type=text]").each(function() {
        arr.push($(this).val());
        sum += parseInt($(this).val());
      });

      var n = arr.length;
      var AVG = (sum / n);
      alert(sum + "," + AVG);
    });

    // End Average Form
  } else if ((launchCount % 2) == 0) {
    $('.form-space').css('opacity', '0');
    $('.form-add-remove').find("input[type=text]").val('');

    if ($('.multi-field', $wrapper).length > 1) {
      $(this).parent('.multi-field').remove(); // does not seem to work!
    }
    arr = []; // also does not seem to work
  }

});

我在jQuery的底部评论了几行，以说明我尝试过的内容。我还考虑将数组长度设置为0，但我也无法使其工作。

显然，这是一项正在进行中的工作。我的jsfiddle在这里：http://jsfiddle.net/e3b9bopz/77/

Answer 1

你能试试吗？

$(".calc").click(function() {
  $("input[type=text]").each(function() {
    arr.push($(this).val());
    sum += parseInt($(this).val());
  });

  var n = arr.length;
  var AVG = (sum / n);
  alert(sum + "," + AVG);
  arr = []; # How about putting your reset here?
   sum = 0; # reinitialized the sum
});

我认为您需要在进行计算后重置arr。

Answer 2

不完全符合您的要求，但将$(function() { $(".check").click(function() { $("input[type=text]").each(function() { arr.push($(this).val()); sum += parseInt($(this).val()); }); var n = arr.length; var AVG = (sum / n); alert(sum + "," + AVG); arr = []; }); })移出{{1}}，然后将整个事件包装在jquery中。

{{1}}

JSFiddle

表单中的空数组，具有按钮单击和动态输入定位

2 个答案: