0

祝大家新年快乐！我正在通过学​​习 jquery 来庆祝。我在下面的代码中添加了一些 jQuery，并设法添加了一些内容并用它更改了一些 css。getGroceries 函数工作正常，并且正在做它应该做的事情。当用户完成输入杂货时，程序 (printGroceries) 应该打印用户输入的列表。那部分也可以工作....但是，当发生这种情况时，程序会删除标题（我的购物清单）并删除所有样式。

我究竟做错了什么？

编辑代码：删除完整代码并添加我更改的部分（评论旧的）。

function printGroceries(groceryItems) {

if (groceryItems.length > 1) {
    $('grocery-list').html('<ol class="items" id="list-items">');
    //document.write("<ol>");
    for(x=0; x < groceryItems.length;x++){
    groceryItems;
    $('#list-items').prepend('<li>' + groceryItems[x] + '</li>');
    //document.write("<li>" + groceryItems[x] + '</li>');
    }
    $('#grocery-list').append('</ol>');
    //document.write("</ol>");
} else {
    $('#grocery-list').prepend('<p>Sorry, your list is empty.</p>');
    //document.write('<p>Sorry, your list is empty.</p>');
}
}

问题：小提琴

4

2 回答 2

0

由于您使用的是 jQuery；这是一个利用$.each(). 此外，最好构建您的字符串并仅附加一次，而不是一遍又一遍地附加每个项目。

function printGroceries(groceryItems) {
  var listItems = '';
  if (groceryItems.length > 0) {
    $.each(groceryItems, function (i, item) {
      listItems += '<li>' + item + '</li>';
    });
    $('#grocery-list').append('<ol class="items" id="list-items">'+listItems+'</ol>');
  } else {
    $('#grocery-list').prepend('<p>Sorry, your list is empty.</p>');
  }
}
于 2013-01-11T03:20:25.503 回答
0

尝试这个

function printGroceries(groceryItems) {
    if (groceryItems.length > 0) {
        $('#grocery-list').html('<ol class="items" id="list-items">');
        //document.write("<ol>");
        for(x=0; x < groceryItems.length;x++){
        groceryItems;
        $('#list-items').prepend('<li>' + groceryItems[x] + '</li>');
        //document.write("<li>" + groceryItems[x] + '</li>');
        }
        $('#grocery-list').append('</ol>');
        //document.write("</ol>");
    } else {
        $('#grocery-list').prepend('<p>Sorry, your list is empty.</p>');
        //document.write('<p>Sorry, your list is empty.</p>');
    }
}

正如我在评论中建议的那样，您错过了一些事情
1.if条件应该检查groceryItems.length > 0
​​ 2.$('grocery-list')应该是$('#grocery-list')，您在这里缺少id 选择器

解决方案：小提琴

于 2013-01-11T03:10:47.960 回答