与多个阵列匹配

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

您不应将这些值存储在不同的数组中。当代码库增长并且不同的函数想要访问这些值时，依赖于数组索引会咬你。只需使用一个对象 -

{
 "apple": {
       "price":32,
       "lot":8
  }}

这样，当你想要访问价格和大量苹果时，你可以做apple.price或apple.lot不做复杂的迭代或循环

- 编辑1

获取已检查元素的列表。

let inputElements = document.getElementsByName("grocery"); let checked = [...inputElements].map(item => { 
  if(item.checked) { 
     return item.value 
  }}).filter(item => item); console.log(checked)

1. 您可以按名称获取所有元素。

2. 您可以使用扩展语法将DOM元素列表转换为数组 [...inputElements]

3. 然后迭代该数组，检查“已检查”状态，如果为true，则返回该值。如果不是这样，那么您将在该位置获得未定义。

4. 然后筛选生成的已检查数组以删除“未定义”元素。

我鼓励你逐行调试每个语句。

之后，检查已选择的值并从中提取const Items = { apple:{ price:32, lot:8}}。如果您只允许检查其中一种水果，那么您几乎Items[checked[0]].price可以获得价格并Items[checked[0]].lot获得批次。

如果允许多个已检查的输入值，则必须使用map或forEach迭代所有值。

Answer 2

我认为你使用对象数组的最好方法。

let array = [

    { "item": "peach", "price": 21, "exp": 21, "lot": 6 },

    { "item": "apple", "price": 32, "exp": 18, "lot": 8 },

    { "item": "orange", "price": 18, "exp": 25, "lot": 4 }

]

在定义之后你可以添加到 crossCheck

crossCheck.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)=>{

  map[item] = [price[index], exp[index], lot[index]];

  return map;

},{});

document.getElementsByName('grocery').forEach((item, index) => {

  if(item.type=='checkbox' && item.checked==true){

       crossCheck.push(item.value);

  }

});

crossCheck.forEach(item => {

  console.log(`${item} price is ${itemMap[item][0]}`);

  console.log(`${item} exp is ${itemMap[item][1]}`);

  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">