javascript - Jquery.prepend() 删除最后插入的值

Question

我正在使用 Jquery 进行简单的插入，一切正常唯一的问题是，第一次插入后，新对象会覆盖最后插入的对象

function insert_note(note_data){
    console.log(note_data);
    var note_object = {}

    note_data.forEach(function(item){
        note_object[item.name] = item.value;
    });

    console.log(note_object);
    note_layout = $(note_layout);
    note_layout.find('span').text(note_object.note_title);
    note_layout.find('p').text(note_object.note_content);
    note_layout.attr('data-id', note_object.note_id);

    $('#notes_container').prepend(note_layout);

这是保存在 js 变量中的 note_layout。每次我用从用户那里获得的信息修改它并使用 prepend() 将其附加到 DOM:

    <div class="row" data-id="">
      <div class="col l8 push-l2 s10 push-s1">
        <div class="card blue-grey darken-1">
          <div class="card-content white-text">
            <span class="card-title"></span>
            <p></p>
          </div>
          <div class="card-action">
            <a class="waves-effect waves-teal btn-flat" data-action="set_as_done">Set as done</a>
            <a class="waves-effect waves-teal btn-flat" data-action="postpone">Postpone</a>
          </div>
        </div>
      </div>
    </div>

我是否缺少考虑某些事情？提前谢谢!

Answer 1

正如 A. Wolff 所评论的，您在第一次调用后重复使用相同的 note_layout，然后移动对象，而不是创建新对象。您可以通过不更改 note_layout 并创建一个新变量来保存您从中创建的 DOM 对象并插入它来解决此问题。

更改:

console.log(note_object);
note_layout = $(note_layout);
note_layout.find('span').text(note_object.note_title);
note_layout.find('p').text(note_object.note_content);
note_layout.attr('data-id', note_object.note_id);

$('#notes_container').prepend(note_layout);

至

console.log(note_object);
var note_layout2 = $(note_layout);
note_layout2.find('span').text(note_object.note_title);
note_layout2.find('p').text(note_object.note_content);
note_layout2.attr('data-id', note_object.note_id);

$('#notes_container').prepend(note_layout2);