javascript - 动态为 JavaScript 对象分配属性和值

Question

我正在尝试创建一个每周膳食计划。目前的情况如下:

1. 您点击一天中的某个时间(早餐/午餐/晚餐)+ 一周中的某一天；
2. 食谱列表逐渐淡入；
3. 通过选择(点击)菜谱，您可以将此菜谱分配给星期几 + 之前选择的时间。

我想将所有这些数据存储到一个 JS 对象中，理想情况下我想动态创建以早餐/午餐/晚餐为键、以食谱为值的日期对象，但我有点卡在这里。我创建了一个jsfiddle作为我想要实现的目标的一个小演示。问题是当我选择例如周一早餐的食谱 1 确实会正确存储，但是如果我选择午餐的食谱 2 - 早餐的值会重新评估为 0。有人可以帮助我理解为什么会发生这种情况并指导我采取更好的方法吗？非常感谢任何建议/帮助!非常感谢!

// find elements
var data_day = '',
time_of_day = '',
recipe = $('.recipes .recipe'),
weekly_recipes = {
  'week_day': {}
};

// show list of recipes
$("[data-time]").on("click", function(){
	$('.recipes').fadeIn();
  time_of_day = $(this).attr('data-time');
  data_day = $(this).parents('.column').attr('data-day');
});

recipe.on('click', function(){
	var recipe_name = $(this).attr('data-recipe');
  weekly_recipes.week_day[data_day] = {
  	'breakfast': 0,
    'lunch': 0,
    'dinner': 0
	};
  $('.recipes').fadeOut();
	weekly_recipes.week_day[data_day][time_of_day] = recipe_name;
	$('.meal-plan').text(JSON.stringify(weekly_recipes));
	console.log(weekly_recipes);
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.column{
  width: 25%;
  float: left;
  padding: 10px;
}
.column strong{
  display: block;
  margin-bottom: 20px;
}
.column .wrp{
  background: white;
}
.column [data-time]{
  cursor: pointer;
  margin-bottom: 10px;
}
.recipes{
  width: 100%;
  display: none;
  clear: both;
  margin-top: 40px;
  background: white;
}
.recipes span{
  display: block;
  cursor: pointer;
  margin-top: 10px;
}
.meal-plan{
  margin-top: 20px;
  background: white;
  clear: both;
  margin-top: 40px;
  background: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="column" data-day="monday">
  <div class="wrp">
    <strong>Monday</strong>
  <div data-time="breakfast">Breakfast</div>
  <div data-time="lunch">Lunch</div>
  <div data-time="dinner">Dinner</div>
  </div>
</div>
<div class="column" data-day="tuesday">
  <div class="wrp">
    <strong>Tuesday</strong>
  <div data-time="breakfast">Breakfast</div>
  <div data-time="lunch">Lunch</div>
  <div data-time="dinner">Dinner</div>
  </div>
</div>

<div class="column" data-day="wednesday">
  <div class="wrp">
    <strong>Wednesday</strong>
  <div data-time="breakfast">Breakfast</div>
  <div data-time="lunch">Lunch</div>
  <div data-time="dinner">Dinner</div>
  </div>
</div>

<div class="recipes">
  <div class="recipe" data-recipe="recipe-1">
   <span data-recipe="recipe-1">recipe 1</span>
  </div>
  <div class="recipe" data-recipe="recipe-2">
   <span data-recipe="recipe-2">recipe 2</span>
  </div>
</div>

<div class="meal-plan">
</div>
</div>

Answer 1

您几乎就在那里，但整个问题是，每次用户单击接收器时，您都将对象重置为默认 0 值。

相反，您需要进行一些检查，确保它是否已初始化，然后不要将其重置为默认值。

我添加了以下代码:

 if(!weekly_recipes.week_day.hasOwnProperty(data_day) || Object.keys(weekly_recipes.week_day[data_day]).length === 0){
    weekly_recipes.week_day[data_day] = {
      'breakfast': 0,
      'lunch': 0,
      'dinner': 0
    };
  }

请参阅下面的工作代码:

// find elements
var data_day = '',
  time_of_day = '',
  recipe = $('.recipes .recipe'),
  weekly_recipes = {
    'week_day': {}
  };

// show list of recipes
$("[data-time]").on("click", function() {
  $('.recipes').fadeIn();
  time_of_day = $(this).attr('data-time');
  data_day = $(this).parents('.column').attr('data-day');
});

recipe.on('click', function() {
  var recipe_name = $(this).attr('data-recipe');
  console.log(weekly_recipes.week_day[data_day]);
  if (!weekly_recipes.week_day.hasOwnProperty(data_day) || Object.keys(weekly_recipes.week_day[data_day]).length === 0) {
    weekly_recipes.week_day[data_day] = {
      'breakfast': 0,
      'lunch': 0,
      'dinner': 0
    };
  }
  $('.recipes').fadeOut();
  weekly_recipes.week_day[data_day][time_of_day] = recipe_name;
  $('.meal-plan').text(JSON.stringify(weekly_recipes));
  console.log(weekly_recipes);
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.column {
  width: 25%;
  float: left;
  padding: 10px;
}

.column strong {
  display: block;
  margin-bottom: 20px;
}

.column .wrp {
  background: white;
}

.column [data-time] {
  cursor: pointer;
  margin-bottom: 10px;
}

.recipes {
  width: 100%;
  display: none;
  clear: both;
  margin-top: 40px;
  background: white;
}

.recipes span {
  display: block;
  cursor: pointer;
  margin-top: 10px;
}

.meal-plan {
  margin-top: 20px;
  background: white;
  clear: both;
  margin-top: 40px;
  background: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="column" data-day="monday">
  <div class="wrp">
    <strong>Monday</strong>
    <div data-time="breakfast">Breakfast</div>
    <div data-time="lunch">Lunch</div>
    <div data-time="dinner">Dinner</div>
  </div>
</div>
<div class="column" data-day="tuesday">
  <div class="wrp">
    <strong>Tuesday</strong>
    <div data-time="breakfast">Breakfast</div>
    <div data-time="lunch">Lunch</div>
    <div data-time="dinner">Dinner</div>
  </div>
</div>

<div class="column" data-day="wednesday">
  <div class="wrp">
    <strong>Wednesday</strong>
    <div data-time="breakfast">Breakfast</div>
    <div data-time="lunch">Lunch</div>
    <div data-time="dinner">Dinner</div>
  </div>
</div>

<div class="recipes">
  <div class="recipe" data-recipe="recipe-1">
    <span data-recipe="recipe-1">recipe 1</span>
  </div>
  <div class="recipe" data-recipe="recipe-2">
    <span data-recipe="recipe-2">recipe 2</span>
  </div>
</div>

<div class="meal-plan">
</div>
</div>