Question

我具有创建新项目的功能，并允许您使用localStorage

删除，更新和保存这些项目上的输入

但是，如果我有多个项目，然后更新并保存更改，则这些更改将应用于所有项目。

在$(".save").click(function()遇到了问题，但是我不确定我是否已使用适当的数组设置了.items。

自从我使用localStorage以来，可以在下面的笔中找到工作代码：

window.localStorage.clear();
//create localStorage item
if (!localStorage.getItem("_storage")) {
  localStorage.setItem("_storage", "");
}
//set data to localStorage function
function saveData() {
  localStorage.setItem("_storage", $("#content").html());
}
// Open the create dialgoue:
$(".add").on("click", function() {
  $(".create").toggle();
});
//Save the entered inputs and post the item:
$(".post").click(function() {
  var id = $(".createtext").val();
  var createtitle = $(".createtitle").val();
  var item = "";
  if (id[0]) {
    for (var i = 0; i < id.length; i++) {
      item += "<div>" + id[i] + "</div>";
    }
  } else {
    item = "<div>Click update to add a card</div>";
  }
  $("#content").append(
    '<div class="item">' +
      '<div class="title">' +
      createtitle +
      "</div>" +
      "<div class='text'>" +
      id +
      "</div>" +
      '<button class="delete">Delete</button>' +
      '<button class="update">Update</button>' +
      "</div>"
  );
  $(".createtitle").val("");
  $(".createtext").val("");
  $(".create").toggle();
  saveData();
});
//Close out of creating a new item
$(".close").click(function() {
  $(".createtitle").val("");
  $(".createtext").val("");
  $(".create").toggle();
});
//Get inputs and open edit window to update the items:
$("#content").on("click", ".update", function() {
  var item = $(this).closest(".item");
  $(".updatetext").val(
    $(this)
      .closest(".item")
      .find(".text")
      .text()
  );
  $(".updatetitle").val(
    $(this)
      .closest(".item")
      .find(".title")
      .text()
  );
  $(".edit").toggle();
});
//Save changes and update the items (error:changes all items when clicked):
$(".save").click(function() {
  var id = $(".updatetext").val();
  var title = $(".updatetitle").val();
  var item = "";
  if (id[0]) {
    for (var i = 0; i < id.length; i++) {
      item += "<div>" + id[i] + "</div>";
    }
  } else {
    item = "<p>Click edit to add a card</p>";
  }
  $(".item").each(function() {
    $(this).html(
      '<div class="title">' +
        title +
        "</div>" +
        "<div class='text'>" +
        id +
        "</div>" +
        '<button class="delete">Deleted(2)</button>' +
        '<button class="update">Updated(2)</button>'
    );
  });
  $(".updatetext").val("");
  $(".updatetitle").val("");
  $(".edit").toggle();
  saveData();
});
//Discard any of these changes:
$(".discard").click(function() {
  $(".updatetext").val("");
  $(".updatetitle").val("");
  $(".edit").toggle();
});
//Delete an item:
$("#content").on("click", ".delete", function() {
  $(this)
    .closest(".item")
    .remove();
  saveData();
});
$(function() {
  if (localStorage.getItem("_storage")) {
    $("#content").html(localStorage.getItem("_storage"));
  }
});

Answer 1

要点是，您在更新回调中调用.each()。

$(".item").each(function() {
    $(this).html(
      '<div class="title"> ....'
    );
  });

从字面上看，这意味着“用item类查找所有 DOM元素，并用给定的html替换它们的内容。

但是您需要替换单击了Update按钮的一个特定元素的内容。为此，您需要以某种方式保留该元素。

其中一种对代码进行最少更改的方法-在适用于update和save函数的范围内引入变量。但是，在您的情况下，这将是一个全局变量，通常这不是一个好主意。

因此，我建议将所有代码包装到一个函数中（例如$(function() {});。然后，您可以引入一个局部变量：

$(function () {
  // define it
  var $selectedItem;

  // assign a value in the update click callback
  $('#content').on('click', '.update', function () {
    $selectedItem = $(this).closest('.item');
    // ...
  });

  // read the value in the save click callback
  $('.save').click(function () {
    // ...
    $selectedItem.html('...');
    // ...
  });
});

示例：https://codepen.io/anon/pen/GzXaoV

jQuery-使用本地存储更新和保存更改

1 个答案: