div没有显示对象文字的更新

时间:2013-11-27 22:03:47

标签: javascript jquery html object-literal

我有一个看起来像这样的嵌套对象文字。

goals = {
  "691473a7-acad-458e-bb27-96bac22467jj": {
    category: "personal",
    datecreated: "2013-10-20",
    goal: "brush teeth--morning",
    icon: "health",
    status: "completed",
    repeat: "no",
    username: "jimmysmith",
    userguid: "0c7270bd-38e8-4db2-ae92-244de019c543"
  },
  "9e693231-e6d8-4ca9-b5c8-81ea7a8056hh": {
    category: "personal",
    datecreated: "2013-10-20",
    goal: "track spending money",
    icon: "dollar",
    status: "inprogress",
    username: "jimmysmith",
    userguid: "0c7270bd-38e8-4db2-ae92-244de019c543"
  },
  "8d23005d-f6f3-4589-bb85-a90510bc45gg": {
    category: "personal",
    datecreated: "2013-10-20",
    goal: "Brush teeth--night",
    icon: "health",
    status: "inprogress",
    username: "jimmysmith",
    userguid: "0c7270bd-38e8-4db2-ae92-244de019c543"
  }
};

我可以使用以下内容在页面上正确显示内容:

displayMyGoalList = function() {
  var completedHTML, inprogressHTML, missedHTML;
  completedHTML = [];
  inprogressHTML = [];
  missedHTML = [];
  $.each(goals, function(index, goal) {
    if (goal.userguid === userguid) {
      if (goal.category === goalCategory) {
        console.log(goal.goal + '  ' + goal.status);
        if (goal.status === 'completed') {
          return completedHTML.push('<li class="' + goal.status + '" data-userguid="' + goal.userguid + '" data-goalguid="' + index + '"><span class="goaltitle"><i class="fa-large icon-' + goal.icon + '"></i> ' + goal.goal + '</span><span class="goalstatus" data-goal="' + goal.goal + '"><input type="checkbox" checked></span><span class="goalremove"><button type="button" class="btn btn-mini btn-danger removegoal" data-removegoal="' + goal.goalguid + '"><b>X</b> </button></span><span class="chartbutton"><i class="fa-large icon-stats" ></i></span></li>');
        } else if (goal.status === 'inprogress') {
          return inprogressHTML.push('<li class="' + goal.status + '" data-userguid="' + goal.userguid + '" data-goalguid="' + index + '"><span class="goaltitle"><i class="fa-large icon-' + goal.icon + '"></i> ' + goal.goal + '</span><span class="goalstatus" data-goal="' + goal.goal + '"><input type="checkbox" ></span><span class="goalremove"><button type="button" class="btn btn-mini btn-danger removegoal" data-removegoal="' + goal.goalguid + '"><b>X</b> </button></span><span class="chartbutton"><i class="fa-large icon-stats" ></i></span></li>');
        } else {
          return missedHTML.push('<li class="' + goal.status + '" data-userguid="' + goal.userguid + '" data-goalguid="' + index + '"><span class="goaltitle"><i class="fa-large icon-' + goal.icon + '"></i> ' + goal.goal + '</span><span class="goalstatus" data-goal="' + goal.goal + '"><input type="checkbox" ></span><span class="goalremove"><button type="button" class="btn btn-mini btn-danger removegoal" data-removegoal="' + goal.goalguid + '"><b>X</b> </button></span><span class="chartbutton"><i class="fa-large icon-stats" ></i></span></li>');
        }
      }
    }
  });
  $(".goalsinprogress").html(inprogressHTML.join(""));
  $(".goalscompleted").html(completedHTML.join(""));
  $(".goalsmissed").html(missedHTML.join(""));
  return $(".goalsection").css({
    visibility: "visible"
  }).fadeIn(200);
};

我可以正确地将新目标对象添加到嵌套文字中,但html div不会显示新目标。

$('#savegoal').click(function() {
  datecreated = new Date().toString();
  goals = JSON.parse(localStorage["goals"]);
  goalguid = createGuid();
  goals[goalguid] = {
    status: "inprogress",
    category: $("#thecategory").val(),
    goal: $("#thegoal").val(),
    icon: $("input[name=icon]:checked").val(),
    datecreated: datecreated,
    userguid: userguid,
    username: username,
    recurring: $("input[name=days]:checked").val(),
    infotype: $("input[name=theinfotype]:checked").val()
  };
  localStorage.setItem("goals", JSON.stringify(goals));
  $("#addgoalform").hide();
  $('#thegoal').val('');
  $('#theicon input').removeAttr('checked');
  $('#infotype input').removeAttr('checked');
  $('#daysoftheweek input').removeAttr('checked');
  logSummary();
  return displayMyGoalList();
});

我在显示功能中的每个地方的几个地方运行console.log,所有对象都显示出来。但他们并没有把它变成联盟。有什么想法吗?

我试图在重绘之前用.html('')和.empty()清空div,但这没有什么区别。

非常感谢, 查理马吉

1 个答案:

答案 0 :(得分:0)

这属于愚蠢的类别。并解释了为什么在试图评论或回答时没有人选择它。

我认为值得在这里作为提醒。我的问题是隐藏的,但很明显。我的$ .each工作正常。这一切都归结为大写/小写问题。我的代码正在寻找一个名为'school'的字符串,但我的功能是捕获一个'School'的值。

我在savegoal函数中所做的就是改变这个

category: $("#thecategory").val(),

到这个

category: $("#thecategory").val().toLowerCase(),