gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 00:02:18 25 4
gpt4 key购买 nike

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

不起作用的部分位于用户从自动列表中输入名称的位置。根据他们输入的内容,将从项目名称创建一个新列表,但我想从输入的名称导入原始对象中存储的值,但它未定义。

如果我控制台记录该值,即 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
})

下面是完整的代码,如果您在输入框中选择“Carrot”,顶部表格的“卡路里”为未定义,应为 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)
});

如果您这样做,那么当您创建食物名称时,它们会自动添加到自动完成列表中 - 无需同时执行这两项操作。

关于javascript - 在另一个函数中使用对象项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55118989/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com