-6

我正在尝试根据用户在数量文本框中输入的内容添加订单项。

因此，如果用户输入的数量为 2，页面将显示：

第 1 项的文本行

第 2 项的文本行

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>

<script type="text/javascript">

$('#Quantity').change(function() {
  var textualValue = $(this).val();
  var numericValue = parseInt(textualValue);

  if (!isNaN(numericValue))
    modifyDOMWithNumber(numericValue);
})


function modifyDOMWithNumber(number) {
   var ul = $('ul#someListToAlter').empty();
   var item;

   for (var i=0; i<number; i++) {
      item = $("<li>");
      item.text("Text line for item "+i);
      ul.append(item);
   }
}

</script>

<form id="form1" name="form1" method="post" action="">
  <input type="text" name="none" id="Quantity" />
</form>

</body>
</html>
4

1 回答 1

0

分解问题：

  1. 您需要解析用户输入
  2. 并相应地操作 DOM

首先，您需要执行以下操作（您需要修改它以适合您的情况）：

$('#someTextInputWithThisID').change(function() {
  var textualValue = $(this).val();
  var numericValue = parseInt(textualValue);
  if (!isNaN(numericValue))
    modifyDOMWithNumber(numericValue);
})

在哪里，modifyDOMWithNumber你会有你的代码来反映那个输入。例子：

function modifyDOMWithNumber(number) {
   var ul = $('ul#someListToAlter').empty();
   var item;
   for (var i=0; i<number; i++) {
      item = $("<li>");
      item.text("Text line for item "+(i+1));
      ul.append(item);
   }
}

当然，所有这些都作为一个例子来给你一个大致的想法。

于 2013-05-23T13:41:23.903 回答