与多个阵列匹配

Question

我从多个数组开始。在此基础上的复选框的选择，我想交叉检查与值item阵列，并从获得的相关值price和exp数组。

<input type="checkbox" name="grocery" value="peach">

<input type="checkbox" name="grocery" value="apple">

<input type="checkbox" name="grocery" value="orange">

例如，如果选中第二个复选框（value =“apple”），那么我需要能够单独获取其值。

这就是我到目前为止所拥有的。如何选择复选框值相匹配的item阵列能够从收集的价值观price，exp和lot数组？我正在寻找一种在vanilla javascript中实现它的方法。

let item = ["peach", "apple", "orange"];

let price = [21, 32, 18];

let exp = [21, 18, 25];

let lot = [6, 8, 4];

let crossCheck = [];

let items = document.getElementsByName('grocery');

for(var i = 0; i < items.length; i++) {

    if(items[i].type == 'checkbox' && items[i].checked) {

        crossCheck.push(items[i].value);

        console.log(s)

    }

}

Answer 1

您不应将这些值存储在不同的数组中。当代码库增长并且不同的函数想要访问这些值时，依赖于数组索引会咬你。只需使用一个对象 -{ &nbsp;"apple":&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"price":32, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"lot":8 &nbsp;&nbsp;}}这样，当你想要访问价格和大量苹果时，你可以做apple.price或apple.lot不做复杂的迭代或循环- 编辑1获取已检查元素的列表。let&nbsp;inputElements&nbsp;=&nbsp;document.getElementsByName("grocery");&nbsp;let&nbsp;checked&nbsp;=&nbsp;[...inputElements].map(item&nbsp;=>&nbsp;{&nbsp; &nbsp;&nbsp;if(item.checked)&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;item.value&nbsp; &nbsp;&nbsp;}}).filter(item&nbsp;=>&nbsp;item);&nbsp;console.log(checked)您可以按名称获取所有元素。您可以使用扩展语法将DOM元素列表转换为数组&nbsp;[...inputElements]然后迭代该数组，检查“已检查”状态，如果为true，则返回该值。如果不是这样，那么您将在该位置获得未定义。然后筛选生成的已检查数组以删除“未定义”元素。我鼓励你逐行调试每个语句。之后，检查已选择的值并从中提取const Items = { apple:{ price:32, lot:8}}。如果您只允许检查其中一种水果，那么您几乎Items[checked[0]].price可以获得价格并Items[checked[0]].lot获得批次。如果允许多个已检查的输入值，则必须使用map或forEach迭代所有值。

Answer 2

我认为你使用对象数组的最好方法。let array = [&nbsp; &nbsp; { "item": "peach", "price": 21, "exp": 21, "lot": 6 },&nbsp; &nbsp; { "item": "apple", "price": 32, "exp": 18, "lot": 8 },&nbsp; &nbsp; { "item": "orange", "price": 18, "exp": 25, "lot": 4 }]在定义之后你可以添加到 crossCheckcrossCheck.push(array[i])希望这个解决方案可以帮到你。谢谢阅读

Answer 3

您可以使用array.reduce它们各自的字段来映射项目，我假设您的项目名称是唯一的。let items = ["peach", "apple", "orange"];let price = [21, 32, 18];let exp = [21, 18, 25];let lot = [6, 8, 4];let crossCheck = [];const itemMap = items.reduce((map, item, index)=>{&nbsp; map[item] = [price[index], exp[index], lot[index]];&nbsp; return map;},{});document.getElementsByName('grocery').forEach((item, index) => {&nbsp; if(item.type=='checkbox' && item.checked==true){&nbsp; &nbsp; &nbsp; &nbsp;crossCheck.push(item.value);&nbsp; }});crossCheck.forEach(item => {&nbsp; console.log(`${item} price is ${itemMap[item][0]}`);&nbsp; console.log(`${item} exp is ${itemMap[item][1]}`);&nbsp; console.log(`${item} lot is ${itemMap[item][2]}`);});<input type="checkbox" name="grocery" value="peach"><input type="checkbox" name="grocery" value="apple" checked><input type="checkbox" name="grocery" value="orange">