Question

请原谅我的意大利面条代码。我正在努力学习。

当我点击add food按钮时，它会在食物清单中添加食物。然而，当我选择另一种食物并添加它时，先前的食物项目与当前选择的食物一起添加。同样，如果我继续该过程，则添加所有先前添加的项目，包括当前项目。因此，结果是以前添加的食物清单，这很糟糕。似乎每当我点击食物项目时，所有之前点击的项目都被“保持”＃34;或者仍以某种方式引用。我不明白为什么会这样。

我需要这样做，以便一次只添加一个食品。我已经研究了很多，但找不到与我的问题类似的解决方案。

这是我的代码。我已经围绕问题区留下了评论。

JavaScript的：

const callApi = (url) => {
   fetch(url).then(function(response) {
   return response.json();
})
.then(function (data) {
  if (data.hits.length > 0) {
   data.hits.forEach((foodItem) => {
   makeFoodInstance(foodItem);
});
    } else {
   displayResults.innerHTML = "No results match this search."
    }
  });
}

const makeFoodInstance = (f) => {
  let food = new Food(f.fields.item_id, f.fields.item_name);
  food.carbohydrates(f.fields.nf_dietary_fiber, f.fields.nf_sugars, 
    f.fields.nf_total_carbohydrate);
  food.fats(f.fields.nf_saturated_fat, f.fields.nf_polyunsaturated_fat, 
  f.fields.nf_monounsaturated_fat, f.fields.nf_trans_fatty_acid, 
  f.fields.nf_total_fat);
  food.minerals(f.fields.nf_calcium_dv, f.fields.nf_sodium, 
  f.fields.nf_iron_dv);
  food.vitamins(f.fields.nf_vitamin_a_dv, f.fields.nf_vitamin_c_dv);
  food.protein(f.fields.nf_protein);
  food.calories(f.fields.nf_calories, f.fields.nf_calories_from_fat);
  food.water(f.fields.nf_water_grams);
  food.servings(f.fields.nf_servings_per_container, 
  f.fields.nf_serving_size_qty, f.fields.nf_serving_size_unit);
  displayResults.children[0].innerHTML = '';
  resultsList.insertAdjacentHTML('afterbegin', `<li class="results-list-
   item">${food.name}</li>`);
   getNutrition(food);
}


const getNutrition = (nutrition) => {
  let foodResultItem = document.querySelector('.results-list-item');
  let nutritionListItem =
      `<li class="nutrition-list-item">
        <p>${nutrition.name}</p>
        <p>Sugars ${nutrition.sugars}</p>
        <p>Total Carbohydrates ${nutrition.total_carbs}</p>
        <p>Saturated Fat ${nutrition.satured}</p>
        <p>Polyunsaturated Fat ${nutrition.polyunsaturated}</p>
        <p>Monounsaturated Fat ${nutrition.monounsaturated}</p>
        <p>Trans Fat ${nutrition.trans}</p>
        <p>Total Fat ${nutrition.total_fat}</p>
        </li>
      `;

    /* 
       this is where the problem is starting (i think)
       passing the nutrition variable to storeFood()
    */
  foodResultItem.addEventListener('click', function(e) {
    nutritionList.innerHTML = '';
    nutritionList.insertAdjacentHTML('afterbegin', nutritionListItem);
    storeFood(nutrition);
  }, false);
}

const storeFood = (f) => {
  addFood.addEventListener('click', (a) => {
    if (localStorage) {
      localStorage.setItem(f.id, f.name.toString());
      userAddedFood.insertAdjacentHTML('afterbegin', `<li class="selected-
food-item">${f.name}</li>`);
     } else {
      userAddedFood.append('Sorry, storage is full');
    }
  }, false);
}

HTML：

<div class="container">
  <section class="search">
    <h1>Health Tracker</h1>
    <input type="text" id="search-bar">
    <input type="submit" value="search" id="search-btn">
  </section>
  <br>
  <br>
  <br>
  <section class="results">
    <h3>Search results will display here</h3>
    <ul id="results-list"></ul>
  </section>
  <section class="nutrition-results">
    <h3>Nutrition Facts</h3>
    <ul id="nutrition-list"></ul>
    <input type="button" value="add-food" id="add-food-button">
  </section>
   <section class="selected-food">
     <h3>Foods you've eaten today</h3>
     <ul class="users-food-result"></ul>
  </section>
  <section class="user-nutrition-facts">
    <h3>Your daily nutrition totals</h3>
    <div class="users-nutrition-totals"></div>
  </section>
</div>

Answer 1

看起来每次点击foodResultItem时，都会调用storeFood()传递当前营养项目。 storeFood本身在addFood上创建一个点击处理程序，将该特定食品添加到列表中。这些点击处理程序适用于addFood元素上的每个特定食物，即使您通过单击其他foodResultItem创建新的点击处理程序。因此，当您单击addFood按钮时，您添加到其中的所有事件处理程序都会运行，从而为您提供不需要的结果。

JavaScript点击事件会将之前点击的项目添加到列表

1 个答案: