Question

您好我刚刚开始使用jQuery我可以使用一个项目的手。

我们正在设置预算助理，其中将有大约20个项目列表，每个项目旁边都有一个文本框。然后总会出现在底部的总数。

我在这里非常接近，但我希望错误显示在每个文本输入的下方，而不是在底部。

我确信这是可能的，但我无法弄清楚如何。我一直在网上寻找修复但到目前为止没有运气

有人可以看看并让我知道吗？

我非常感谢你的帮助！

 <div width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
<div>
    <div width="40px">1</div>
    <div>Butter</div>
    <div><input class="txt" type="text" name="txt"/></div>
</div>
<div>
    <div>2</div>
    <div>Cheese</div>
    <div><input class="txt" type="text" name="txt"/></div>
</div>
<div>
    <div>3</div>
    <div>Eggs</div>
    <div><input class="txt" type="text" name="txt"/></div>
</div>
<div>
    <div>4</div>
    <div>Milk</div>
    <div><input class="txt" type="text" name="txt"/></div>
</div>
<div>
    <div>5</div>
    <div>Bread</div>
    <div><input class="txt" type="text" name="txt"/></div>
</div>
<div>
    <div>6</div>
    <div>Soap</div>
    <div><input class="txt" type="text" name="txt"/></div>
</div>
<div id="summation">
    <div>&nbsp;</div>
    <div align="right">Sum :</div>
    <div align="center"><span id="sum">0</span></div>
</div>
 </div>



 <script>
$(document).ready(function(){

    //iterate through each textboxes and add keyup
    //handler to trigger sum event
    $(".txt").each(function() {

        $(this).keyup(function(){
            calculateSum();
        });
    });

});

function calculateSum() {

    var sum = 0;
    //iterate through each textboxes and add the values
    $(".txt").each(function() {

        //add only if the value is number
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
        }

    });
    //.toFixed() method will roundoff the final sum to 2 decimal places
    $("#sum").html(sum.toFixed(2));
}
 </script>

Answer 1

我根据你的行为做了一些猜测。我认为你只想输入数字，但那些可能是Int或Float。例2或4.95。但是，如果输入任何其他字符并且不应执行计算，则应出现错误。请参阅工作示例：https://jsfiddle.net/Twisty/ocbLfLm2/16/

<强> HTML

<div width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
  <div class="itemWrap">
    <div>1</div>
    <label>Butter</label>
    <input class="txt" type="text" name="txt[]" />
  </div>
  <div class="itemWrap">
    <div>2</div>
    <label>Cheese</label>
    <input class="txt" type="text" name="txt[]" />
  </div>
  <div class="itemWrap">
    <div>3</div>
    <label>Eggs</label>
    <input class="txt" type="text" name="txt[]" />
  </div>
  <div class="itemWrap">
    <div>4</div>
    <label>Milk</label>
    <input class="txt" type="text" name="txt[]" />
  </div>
  <div class="itemWrap">
    <div>5</div>
    <label>Bread</label>
    <input class="txt" type="text" name="txt[]" />
  </div>
  <div class="itemWrap">
    <div>6</div>
    <label>Soap</label>
    <input class="txt" type="text" name="txt[]" />
  </div>
  <div id="summation" class="itemWrap">
    <div>&nbsp;</div>
    <label style="text-align: right;">Sum :</label>
    <div style="width: 50px; text-align: center;"><span id="sum">0.00</span></div>
  </div>
</div>

<强> CSS

.itemWrap {
  padding: 2px;
  margin: 2px;
  border: 1px solid #E8DCFF;
  width: 170px;
}

.itemWrap * {
  display: inline-block;
}

.itemWrap div:first-child {
  width: 40px;
  text-align: center;
}

.itemWrap label {
  width: 50px;
}

.error {
  border: 1px solid red;
}

.txt {
  border: default;
  width: 50px;
  text-align: center;
}

<强> JQuery的

$(document).ready(function() {
  $(".txt").keyup(function(e) {
    var key = String.fromCharCode(e.which);
    console.log("Key Code:", e.which, "Key:", key);
    if (parseInt(key) || e.which == 8 || e.which == 9 || e.which == 190) {
      $(this).parent(".itemWrap").removeClass("error");
      calculateSum();
    } else {
      $(this).parent(".itemWrap").addClass("error");
    }
  });
});

function calculateSum() {
  var sum = 0;
  //iterate through each textboxes and add the values
  $(".txt").each(function(k, v) {
    //add only if the value is number
    if (!isNaN($(v).val()) && $(v).val().length != 0) {
      sum += parseFloat($(v).val());
    }
  });
  //.toFixed() method will roundoff the final sum to 2 decimal places
  $("#sum").html(sum.toFixed(2));
}

由于个人喜好和经验，我对HTML进行了调整。我只是添加了一些CSS。 JQuery真的是你追求的目标。

由于您使用onKeyUp，我抓住了event，因此我可以查看按下的键。我将charCode转换为keyStroke（例如：65 - ＆gt; A）。然后，我可以使用parseInt()查看keyStroke是字母还是数字。我还想允许Tab，Delete和＆＃39;。＆＃39;，您将看到在比较中添加的那些。如果满足所有条件，我会删除error类，以防上一个条目生成错误，然后运行计算。

希望有所帮助。

评论后更新

https://jsfiddle.net/Twisty/ocbLfLm2/19/

添加了以下内容：

  <div class="itemWrap">
    <div>1</div>
    <label>Butter</label>
    <input class="txt" type="text" name="txt[]" />
    <div class="errorText">Must be a number</div>
  </div>

所以现在你可以添加你喜欢的文字了。然后根据需要使用.show()和.hide()。我还在CSS中通过height: 2.5em;添加了空间。

jQuery在表单输入下放错误？

1 个答案: