Question

我正在使用jquery编写待办事项列表应用程序，但是我遇到了一些问题/错误。第一个元素旨在通过HTML代码进行设置并按预期工作。我的下一步是向另一个列表元素添加一个复选框，输入文本字段和一个下拉按钮（如果用户单击“ Neu”按钮）。如下图所示。

我用来实现此目的的jquery代码是：

$('ul.todo-list').append('<li>' +
            '<input type="checkbox"/>' +
            '<label>' +
            '<input [type="text"] placeholder="Insert your new task here"/>' +
            '</label>' +
            '<div class="arrow-btn"></div>' +
            '</li>');

用户输入随机文本并单击回车按钮后，新文本将出现在第一个li元素下。

这是此代码的片段

$('input').keypress(function (event) {
            if (((event.which || event.keyCode) == 13) && ($(this).val() != '')) {			//Werte bei keypress: ENTER und nicht leerem Textfeld abfragen und setzen
                var todoText = $(this).val();												//Werte aus <input type="text"/> Textfeld abfangen und in einer
                //neuen Variablen abspeichern

                // append new listelement, drop-down button, edit-duplicate-remove button
                $('ul.todo-list').append('<li>' +
                    '<input type="checkbox">' +
                    '<label>' +
                    '<span></span>' +
                    '<input type="text" id="inputValue" readonly/>' +
                    '</label>' +
                    '<div class="arrow-btn"></div>' +
                    '<ul class="item-menu-bar">' +
                    '<li class="edit-btn">Editieren</li>' +
                    '<li class="duplicate-btn">Duplizieren</li>' +
                    '<li class="remove-btn">L&ouml;schen</li>' +
                    '</ul>' +
                    '</li>');

                $('#inputValue').val(todoText);

如果将预览项目添加到列表中，并且用户想要通过单击“新”按钮添加另一个列表项目或元素，则这是我的新问题，我的新待办事项列表如下所示。列表位置2上第二张图片“插入新项目”中的值被新值覆盖，该值通常应位于列表位置3上，而第三个列表位置为空。

Answer 1

Id必须是唯一的。。这意味着删除id="inputValue"，因为它会在每个附加项上重复。.并直接使用内联value="'+todoText+'"

尝试一下

$('input').keypress(function (event) {
  if (((event.which || event.keyCode) == 13) && ($(this).val().trim() !== '')) {			//Werte bei keypress: ENTER und nicht leerem Textfeld abfragen und setzen
      var todoText = $(this).val();												//Werte aus <input type="text"/> Textfeld abfangen und in einer
      //neuen Variablen abspeichern

      // append new listelement, drop-down button, edit-duplicate-remove button
      $('ul.todo-list').append('<li>' +
          '<input type="checkbox">' +
          '<label>' +
          '<span></span>' +
          '<input type="text" value="'+todoText+'" readonly/>' +
          '</label>' +
          '<div class="arrow-btn"></div>' +
          '<ul class="item-menu-bar">' +
          '<li class="edit-btn">Editieren</li>' +
          '<li class="duplicate-btn">Duplizieren</li>' +
          '<li class="remove-btn">L&ouml;schen</li>' +
          '</ul>' +
          '</li>');
  }
});

其他：使用$(this).val().trim() !== '' trim避免空格

jQuery待办事项列表将li元素追加到现有列表

1 个答案: