Question

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

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

第1项的文字行

第2项的文字行

CODE：

<!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>

Answer 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>

FIDDLE

Answer 2

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

<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>

Answer 3

你似乎忘记了你的ul添加了行

添加

<ul id="someListToAlter">

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

请参阅：http://jsfiddle.net/WfFTC/

根据数量代码添加订单项

3 个答案: