jQuery表单的每个输入仅接受多个值 [英] jQuery form each input accept only multiple values

问题描述

我正在尝试开发一个订单表格，该物品只能用多种包装数量填充.

I'm trying to develop a order form that item has to be fill only with the multiple quantity of package.

例如每包20个

仅接受包装数量多的包装，否则向我显示一条警告消息.

Only accept package multiple quantity otherwise show me an alert message.

我的问题是，我的代码不适用于其他行，仅适用于第一行，这就是我需要您的帮助人员的原因.

My problem is, my code is not working for other lines, only the first one, and this is the point that I need your help guys.

我想提醒您，寻找每一行，而不是第一行.

I would like to made an alert that looking for every line, not the first only.

P.S.顺便说一句，我不是javascript方面的专家，我了解php/html，并且在一些论坛上学到很多东西，并从各个地方做一些解释，并将所有内容都加入我的代码中.

P.S. I'm not an expert in javascript by the way, i have knowledge of php/html and I read a lot in a few forums and take some explanations from everywhere and join everything in my code.

感谢大家的帮助！

这是我的代码.

$("#Quantity").focusout(function(){

var X = $('#package').val();

	$("#Quantity").blur(function() {
	  var number = parseInt($(this).val());
	  if (!isNaN(number)) {
	    if (number % X === 0) {
	      $("#output").html("It is multiple of " + X );
	    } else {
	      $("#output").html("Not multiple of " + X );
	    }
	  } else {
	    $("#output").html("Entry is not a number.");
	  }
	});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Quantity:
<input type="text" id="Quantity">
Package:
<input type="text" id="package" value="20">
<br><br>
Quantity:
<input type="text" id="Quantity">
Package:
<input type="text" id="package" value="30">
<p id="output"></p>

推荐答案

正如问题下方的注释所述，您不能在HTML中多次使用ID.改为分配CSS类.

As the comment below your question says, you cannot use an ID multiple times in HTML. Assign CSS classes instead.

也不要(！)创建嵌套的事件处理程序.您的代码具有一个"focusout"事件处理程序，其中包含模糊"事件处理程序.每次"focusout"事件处理程序运行时，这都会附加一个新的"blur"事件处理程序，这意味着在使用表格一段时间后，您将获得大量的冗余事件处理程序.

Also don't (!) create nested event handlers. Your code has a "focusout" event handler that contains a "blur" event handler. This attaches a new "blur" event handler every single time the "focusout" event handler runs, which means you'll end up with tons of redundant event handlers after using the form for a while.

$(".quantity").blur(function() {
  var number = parseInt( $(this).val() );
  var package = parseInt( $(this).next(".package").val() );

  if (isNaN(number) || isNaN(package)) {
    $("#output").html("Entry is not a number.");
    return;
  }

  if (number % package === 0) {
    $("#output").html(`${number} is multiple of ${package}.`);
  } else {
    $("#output").html(`${number} is not multiple of ${package}.`);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Quantity: <input type="text" class="quantity">
Package: <input type="text" class="package" value="20">
<br><br>
Quantity: <input type="text" class="quantity">
Package: <input type="text" class="package" value="30">

<p id="output"></p>

请注意允许将变量值直接集成到文本中的反引号字符串(这在现代浏览器中有效，

Note the backtick strings that allow direct integration of variable values into the text (this works in modern browsers, see documentation).

这篇关于jQuery表单的每个输入仅接受多个值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！