Динамически назначать свойства и значения объекту javascript - PullRequest
Новая
       11

Динамически назначать свойства и значения объекту javascript

0 голосов
/ 16 октября 2018

Я пытаюсь создать планировщик еды на неделю.На данный момент сценарий следующий:

  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>

Ответы [ 2 ]

0 голосов
/ 16 октября 2018

Ваш код очень близок к работе, вам нужно только позаботиться о том, чтобы объект какого-то дня уже существовал, чтобы не создавать его снова.

См. Код ниже, вы просто создаете новый день, когда он нене существует, если он уже существует, просто добавьте рецепт к time_of_day того дня 

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);
});
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>
0 голосов
/ 16 октября 2018

Вы были почти там, но вся проблема заключалась в том, что вы сбрасывали объект на значение по умолчанию 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...