0

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

因此，如果用户输入的数量为 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

3 回答 3

1

我就把这个扔在这里

<body>

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

<ul id='someListToAlter'></ul>

<script>
$('#Quantity').keyup(function () {
    var textualValue = $(this).val();
    var numericValue = parseInt(textualValue, 10);

    if (!isNaN(numericValue)) {
        modifyDOMWithNumber(numericValue);
    } else {
        modifyDOMWithNumber(0);
    }
});

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

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

</body>

小提琴

于 2013-05-24T14:45:04.210 回答
0

我不检查您的代码，但您肯定需要在文档就绪处理程序中设置它：

<script type="text/javascript">
$(function(){ // == $(document).ready()
$('#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>

或者在正文结束标记之前设置它：</body>

于 2013-05-24T14:37:27.177 回答
0

您似乎忘记了添加行的 ul

只需添加

<ul id="someListToAlter">

你想要在你的身体里，它会起作用：

见：http: //jsfiddle.net/WfFTC/

于 2013-05-24T14:37:44.870 回答