文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >动态地为javascript对象分配属性和值

问动态地为javascript对象分配属性和值
EN

Stack Overflow用户
提问于 2018-10-16 11:30:01
回答 2查看 90关注 0票数 2

我正试着创造一个星期的膳食计划。目前的情况如下：

  1. 你点击一天中的某个时间(早餐/午餐/晚餐)+一周中的某一天；
  2. 食谱的清单逐渐消失；
  3. 通过在菜谱上选择(单击)，您可以将此菜谱指定为周的一天+先前选定的一天的时间。

我希望将所有这些数据存储到JS对象中，理想情况下，我希望动态地创建以早餐/午餐/晚餐作为键和菜谱作为值的day对象，但是我有点被困在这里了。我创建了一个小提琴，作为我正在尝试实现的一个小演示。问题是，当我选择星期一早餐的菜谱-1时，它确实会被正确地储存起来，但是如果我选择食谱-2作为午餐-早餐会被重新计算值0。有人能帮助我理解为什么会发生这种事，并引导我找到更好的方法吗？任何建议/帮助都是非常感谢的！非常感谢!

​

代码语言：javascript
复制
// 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);
});
代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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>

​

jquery
javascript-objects
javascript
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-10-16 11:40:15

您的代码非常接近于工作，您只需要在某一天的对象已经存在时才能避免再次创建它。

参见下面的代码，您只需在不存在的情况下创建一个新的一天，如果它已经存在，那么只需将菜谱添加到当天的time_of_day中即可。

​

代码语言：javascript
复制
var data_day = '',
time_of_day = '',
recipe = $('.recipes .recipe'),
weekly_recipes = {
  'week_day': {}
};

$("[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');
  
  //CHECK FOR DAY EXISTANCE
  if (weekly_recipes.week_day[data_day] == null || !weekly_recipes.week_day.hasOwnProperty(data_day)){
    weekly_recipes.week_day[data_day] = {
      'breakfast': 0,
      'lunch': 0,
      'dinner': 0
    };
  }
  
  weekly_recipes.week_day[data_day][time_of_day] = recipe_name;
  $('.recipes').fadeOut();
	$('.meal-plan').text(JSON.stringify(weekly_recipes));
  console.clear()
	console.log(weekly_recipes);
});
代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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>

​

票数 2
EN

Stack Overflow用户

发布于 2018-10-16 11:40:05

您几乎已经做到了，但整个问题是，每次用户单击前台时，都会将对象重置为默认的0值。

相反，您需要进行一些检查，如果已经初始化了，那么就不要将其重置为默认设置。

我添加了以下代码：

代码语言：javascript
复制
 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
    };
  }

见以下工作代码：

​

代码语言：javascript
复制
// 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);
});
代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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>

​

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/52834482

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档