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

Question

我有一个用于计算数字数组的总和和平均值的表格。我正在使用一个按钮来触发表单出现，然后用户可以添加额外的输入字段来输入他们想要的任意数量的值。当他们单击 'Calc' 按钮时，他们会收到总和和平均值的提醒。这么多工作正常。问题是当我再次单击触发器关闭然后重新打开表单时，出现与用户选择的输入字段数量相同的输入字段，尽管能够清除它们的值，但我无法清空关联的数组.因此，当用户第二次输入值并尝试执行计算时，先前的值将添加到这些新值中。

最重要的是，我希望动态添加的输入一个一个地出现在另一个之上，对于“.remove-field”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

不完全是您需要的，但是将 $(".check").click 移出 $('.form-launch').click，并将整个内容包装在 jquery 中。

$(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 = [];
  });
})

JSFiddle

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

Empty array in form with button click and dynamic input positioning

javascript

arrays

jquery

input

dynamically-generated