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

これを試して

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
$('grocery-list')$('#grocery-list')

解決策：フィドル

于 2013-01-11T03:10:47.960 に答える
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 に答える