在另一个功能中使用对象项目

我正在尝试使用在初始设置列表中使用另一个函数中创建的对象来创建另一个对象。希望这是有道理的。完整的代码位于这个问题的底部。

不起作用的零件在以下以下用户从自动列表中输入名称。从他们输入新列表中，将从项目名称创建新列表，但我想从输入的名称中导入存储在原始对象中的值，但它出现不确定。

如果我控制值登录值，即carrot.cal原始val显示在控制台

中

这是我在

方面遇到麻烦的部分

  $("#add_food").click(function(){
    var food_name = $('#food_name').val();
    var cal = food_name.Cal;  // This should be the cal value from initial list above
    newFood = new My_list(food_name,100,cal,20,30,40,50,60,70,80,90,5); // values are test values apart from variable cal and food_name
  })

下面是完整的代码，如果您在输入框中选择胡萝卜，顶表的卡路里为未定义，应为41

$(document).ready(function() {
   // carrot = {name:'Carrot', cal:41, A:334, B6:5, B12:9, C:9, D:0, calcium:3, Iron:1, mag:3};
  
  Carrot = new food('Carrot',41,334,5,0,9,0,3,1,3);
  butternut_squash = new food('Butternut Squash',45,212,10,0,35,0,4,3,8);
  Apple = new food('Apple',52,1,0,0,7,0,0,0,1);
  function food(Name, Cal, A, B6, B12, C, D, Calcium, Iron, Mag){
    this.Name = Name;
    this.Weight = 100;
    this.Cal = Cal;
    this.A = A;
    thidd_B6 = B6;
    this.B12 = B12;
    this.C = C;
    this.D = D;
    this.Calcium = Calcium;
    this.Iron = Iron;
    this.Mag = Mag;
// create the main table of all the items
    var newRow = "<tr><td>"+this.Name+"</td><td>"+this.Cal+"</td><td>"+this.A+"</td><td>"+this.B6+"</td><td>"+this.B12+"</td><td>"+this.C+"</td><td>"+this.D+"</td><td>"+this.Calcium+"</td><td>"+this.Iron+"</td><td>"+this.Mag+"</td></tr>";
    $("#food_list").append(newRow);
  }
// Auto Fill function
  $( function(){
    var foodList = ["Carrot", "Apple", "Butternut Squash"];
    $("#food_name").autocomplete({
      source: foodList
    });
  })
// Add new item to USERS list
  $("#add_food").click(function(){
    var food_name = $('#food_name').val();
    var cal = food_name.Cal;  // This should be the cal value from initial list above
    newFood = new My_list(food_name,100,cal,20,30,40,50,60,70,80,90,5); // values are test values apart from variable cal and food_name
  })
  function My_list(Name, Weight, Cal, A, B6, B12, C, D, Calcium, Iron, Mag){
    this.Name = Name;
    this.Weight = Weight;
    this.Cal = Cal;
    this.A = A;
    this.B6 = B6;
    this.B12 = B12;
    this.C = C;
    this.D = D;
    this.Calcium = Calcium;
    this.Iron = Iron;
    this.Mag = Mag;
    var newRow = "<tr><td>"+this.Name+"</td><td>"+this.Cal+"</td><td>"+this.A+"</td><td>"+this.B6+"</td><td>"+this.B12+"</td><td>"+this.C+"</td><td>"+this.D+"</td><td>"+this.Calcium+"</td><td>"+this.Iron+"</td><td>"+this.Mag+"</td></tr>";
    $("#my_list").append(newRow);
  }
})

<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">  </script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src=foodList.js></script>
</head>
<body>
  <!--Add food box with auto fill function-->
  <div align="right">
    <button type=button id="add_food">Add Food</button>
    <input type=text id="food_name"/>
  </div>
  <table id="my_list">
    <tr>
      <th>Food</th>
      <th>Calories</th>
      <th>A</th>
      <th>B6</th>
      <th>B12</th>
      <th>C</th>
      <th>D</th>
      <th>Calcium</th>
      <th>Iron</th>
      <th>Magnesium</th>
    </tr>
  </table>
  <table id="food_list">
    <tr>
      <th>Food</th>
      <th>Calories</th>
      <th>A</th>
      <th>B6</th>
      <th>B12</th>
      <th>C</th>
      <th>D</th>
      <th>Calcium</th>
      <th>Iron</th>
      <th>Magnesium</th>
    </tr>
  </table>
</body>
</html>

您可以保留对自己创建的所有食物类型的参考，作为这样的对象的属性...

// create an empty object to hold the food objects - do this outside document.ready
var foods = {};
$(document).ready(function() {
    // create the food objects
    foods["Carrot"] = new food('Carrot',41,334,5,0,9,0,3,1,3);
    foods["Butternut Squash"] = new food('Butternut Squash',45,212,10,0,35,0,4,3,8);
    foods["Apple"] = new food('Apple',52,1,0,0,7,0,0,0,1);
    // etc..

然后，以后访问食物对象...

var food_name = $('#food_name').val();
var food = foods[food_name];
var cal = food.Cal;

为了使这需要减少维护，您还可以从foods对象中的可用食物对象填充自动填充...

$("#food_name").autocomplete({
    source: Object.keys(foods)
});

如果您这样做，则在创建它们时，食物名称将自动添加到自动填充列表中 - 不需要同时进行。

创建一个列表以存储您的对象。然后，在获得自动完成值后，将此值映射到列表中的值存储以获取对象。

$(document).ready(function() {
   // carrot = {name:'Carrot', cal:41, A:334, B6:5, B12:9, C:9, D:0, calcium:3, Iron:1, mag:3};
  
  Carrot = new food('Carrot',41,334,5,0,9,0,3,1,3);
  butternut_squash = new food('Butternut Squash',45,212,10,0,35,0,4,3,8);
  Apple = new food('Apple',52,1,0,0,7,0,0,0,1);
  
  
  var FOOD_LIST = {'Carrot': Carrot, 'Apple': Apple, 'Butternut Squash': butternut_squash};
  function food(Name, Cal, A, B6, B12, C, D, Calcium, Iron, Mag){
    this.Name = Name;
    this.Weight = 100;
    this.Cal = Cal;
    this.A = A;
    thidd_B6 = B6;
    this.B12 = B12;
    this.C = C;
    this.D = D;
    this.Calcium = Calcium;
    this.Iron = Iron;
    this.Mag = Mag;
// create the main table of all the items
    var newRow = "<tr><td>"+this.Name+"</td><td>"+this.Cal+"</td><td>"+this.A+"</td><td>"+this.B6+"</td><td>"+this.B12+"</td><td>"+this.C+"</td><td>"+this.D+"</td><td>"+this.Calcium+"</td><td>"+this.Iron+"</td><td>"+this.Mag+"</td></tr>";
    $("#food_list").append(newRow);
  }
// Auto Fill function
  $( function(){
    var foodList = ["Carrot", "Apple", "Butternut Squash"];
    $("#food_name").autocomplete({
      source: foodList
    });
  })
// Add new item to USERS list
  $("#add_food").click(function(){
    var food_name = $('#food_name').val();
    var cal = FOOD_LIST[food_name].Cal;  // This should be the cal value from initial list above
    newFood = new My_list(food_name,100,cal,20,30,40,50,60,70,80,90,5); // values are test values apart from variable cal and food_name
  })
  function My_list(Name, Weight, Cal, A, B6, B12, C, D, Calcium, Iron, Mag){
    this.Name = Name;
    this.Weight = Weight;
    this.Cal = Cal;
    this.A = A;
    this.B6 = B6;
    this.B12 = B12;
    this.C = C;
    this.D = D;
    this.Calcium = Calcium;
    this.Iron = Iron;
    this.Mag = Mag;
    var newRow = "<tr><td>"+this.Name+"</td><td>"+this.Cal+"</td><td>"+this.A+"</td><td>"+this.B6+"</td><td>"+this.B12+"</td><td>"+this.C+"</td><td>"+this.D+"</td><td>"+this.Calcium+"</td><td>"+this.Iron+"</td><td>"+this.Mag+"</td></tr>";
    $("#my_list").append(newRow);
  }
})

<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">  </script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src=foodList.js></script>
</head>
<body>
  <!--Add food box with auto fill function-->
  <div align="right">
    <button type=button id="add_food">Add Food</button>
    <input type=text id="food_name"/>
  </div>
  <table id="my_list">
    <tr>
      <th>Food</th>
      <th>Calories</th>
      <th>A</th>
      <th>B6</th>
      <th>B12</th>
      <th>C</th>
      <th>D</th>
      <th>Calcium</th>
      <th>Iron</th>
      <th>Magnesium</th>
    </tr>
  </table>
  <table id="food_list">
    <tr>
      <th>Food</th>
      <th>Calories</th>
      <th>A</th>
      <th>B6</th>
      <th>B12</th>
      <th>C</th>
      <th>D</th>
      <th>Calcium</th>
      <th>Iron</th>
      <th>Magnesium</th>
    </tr>
  </table>
</body>
</html>

因此，您需要为带有参数的食物对象设置一个获取器，并获得与该食物类型相关的字段。然后，您可以使用此结果来填充表中的行。

$("#food_name").autocomplete({
      source: foodList,
      select: function(event, ui) { -------> Select function for autocomplete widget
        console.log('Food: ', ui)
        // Getter for the food object that 
      }
    });

自动完成的小部件带有一个选择功能，您可以使用该功能来获取值

var foodGetter = function(food) {
  // Get food row. Without food object, can't really help here but it should be a case of returning an array of the values associated with that food
  foodObj = {carrot: [weight, calories, ...], butternut_squash: [...]}
  return foodObj[food]
}

然后，您使用返回的数组来填充表。

相关内容

最新更新

热门标签：