在另一个函数中使用对象项

时间：2019-03-12 10:14:42

标签： javascript jquery

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

用户无法从自动列表中输入名称的地方不在下面。从他们输入的内容中，将使用项目名称创建一个新列表，但我想从输入的名称中导入存储在原始对象中的值，但该名称未定义。

如果我在控制台上记录值Carrot.cal，则原始值会显示在控制台内

这是我遇到的麻烦

  $("#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>

3 个答案:

答案 0 :(得分：1)

您可以保留对您创建的所有食物类型的引用，作为此类对象的属性... 

// 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)
});

如果执行此操作，则在创建食品名称时会将其自动添加到自动完成列表中-无需同时执行这两项操作。

答案 1 :(得分：0)

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

$(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>

答案 2 :(得分：0)

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

$("#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]
}

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

相关问题
最新问题