Question

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

我做错了什么？

EDITED CODE：已删除完整代码，并添加了我更改的部分（旧评论）。

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>');
}
}

问题：fiddle

Answer 1

试试这个

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选择器

解决方案：fiddle

Answer 2

因为你正在使用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>');
  }
}

用户完成进入杂货后内容消失

2 个答案: