无法更新Javascript对象文字中的值,然后更新页面

时间:2013-11-13 22:23:49

标签: javascript jquery arrays

我在这里尝试了大约10个其他问题的答案,但似乎没有任何效果。我已经尝试过各自的地图和grep。

我想更改对象文字中的值,然后更新我的列表。

这是数组:

goals = [
  {
    goalguid: "691473a7-acad-458e-bb27-96bac224205b",
    category: "personal",
    datecreated: "2013-10-20",
    startdate: "2013-10-28",
    enddate: "2013-11-26",
    goal: "go to store",
    icon: "cart",
    status: "completed",
    username: "jtmagee",
    userguid: "0c7270bd-38e8-4db2-ae92-244de019c543"
  }, {
    goalguid: "9e693231-e6d8-4ca9-b5c8-81ea7a80a36a",
    category: "personal",
    datecreated: "2013-10-20",
    startdate: "2013-10-27",
    enddate: "2013-11-27",
    goal: "Brush Teeth",
    icon: "doctor",
    status: "inprogress",
    username: "jtmagee",
    userguid: "0c7270bd-38e8-4db2-ae92-244de019c543"
  }, {
    goalguid: "8d23005d-f6f3-4589-bb85-a90510bccc21",
    category: "work",
    datecreated: "2013-10-20",
    startdate: "2013-10-26",
    enddate: "2013-11-28",
    goal: "Arrive on Time",
    icon: "alarm",
    status: "inprogress",
    username: "jtmagee",
    userguid: "0c7270bd-38e8-4db2-ae92-244de019c543"
  }, {
    goalguid: "ac879673-19eb-43f6-8b95-078d84552da0",
    category: "school",
    datecreated: "2013-10-20",
    startdate: "2013-10-24",
    enddate: "2013-11-29",
    goal: "Do Math Homework",
    icon: "book",
    status: "missed",
    username: "jtmagee",
    userguid: "0c7270bd-38e8-4db2-ae92-244de019c543"
  }
];

我正在关闭用户点击的li中获得的目标。我使用状态键来更改li上的类。

这是我的jQuery捕获复选框上的点击:

$(".goals").delegate("input[type=checkbox]", "click", function() {
  goalguid = $(this).parent().parent().data("goalguid");
  emailGoal = $(this).parent().data('goal');
  if ($(this).prop("checked")) {
    $(this).parent().parent().removeClass("inprogress missed").addClass("completed").prop("checked", true);
    updateStatus = 'completed';
    return updateTheGoal();
  } else {
    $(this).parent().parent().removeClass("completed").addClass("inprogress").prop("checked", false);
    updateStatus = 'inprogress';
    return updateTheGoal();
  }
});

这是我无法开展的工作。有些尝试完全清除了阵列,但大多数,包括这个,除了让我的列表闪存外什么都不做。 displayGoalList函数适用于其他用途。

updateTheGoal = function() {
  var goalList;
  $.each(goals, function() {
    if (goals.goalguid === goalguid) {
      return goals.status === updateStatus;
    }
  });
  goals = JSON.parse(localStorage["goals"]);
  goalList = $.grep(goals, function(e) {
    return e.userguid === userguid;
  });
  localStorage.setItem(userguid + "Goals", JSON.stringify(goalList));
  logSummary();
  return displayMyGoalList();
};

非常感谢任何帮助。感谢。

1 个答案:

答案 0 :(得分:0)

$.each(goals, function() {
    if (goals.goalguid === goalguid) {
      return goals.status === updateStatus;
    }
});

您正在检查goals.goalguid并设置goals.status。这是错的。 goals是一个数组。您的目的是检查数组中的每个元素。然后你实际上并没有做任何回报。 return中的each只会中断循环或继续循环(取决于返回值)。我认为你打算分配它。试试这个:

$.each(goals, function(i, el) {
    if (el.goalguid === goalguid) {
        el.status = updateStatus;
        return false; // break the each
    }
});

此外,删除此位将替换each对本地存储中存储的任何内容所做的任何更改:

goals = JSON.parse(localStorage["goals"]);