每次在使用JS的元素上单击完成时，填充一个数组

Question

我有几个类似的项目：

<div data-category="fruit" data-value="apple" data-color="yellow">Apple</div>
<div data-category="fruit" data-value="apple" data-color="green">Apple</div>
<div data-category="fruit" data-value="cherry" data-color="red">Cherry</div>
<div data-category="vegetable" data-value="tomato" data-color="red">Tomato</div>
<div data-category="vegetable" data-value="carrot" data-color="orange">Carrot</div>

用户每次点击元素时，我都应该将data-*信息存储到数组中。

用户可能可以单击相同项目的多次，但具有不同的颜色（即，苹果）。在这种情况下，我应该使用最后一个单击的项目值更新数组，然后删除旧数字。

所需的输出是这样的：

Array (
    [0] => Array (
        [category] => fruit
        [value] => apple
        [color] => green
    )
    [1] => Array (
        [category] => vegetable
        [value] => tomato
        [color] => red
    )
)

请注意，在此示例中，用户单击第一个<div>和之后。这就是为什么，我应该只有第二个<div>信息，而不是第一个<div>的Infos。

让我知道是否清楚。

实际上，这里的代码：

var arr = {};
arr[$(this).data('value') + '_' + $(this).data('color')] = { 
    "category": $(this).data('category'),
    "value": $(this).data('value'),
    "color": $(this).data('color')
};

此代码的问题是，在制作一个无效的数组时，我无法真正使用它。

非常感谢您的任何帮助。

Answer 1

尝试使用data-value和data-category的Filter。

注意：Js array not like php associative array its called object in js。数组没有钥匙值对。请与对象一起使用

1.在对象推动之前，过滤不存在的相同值的数组

var arr=[];
$(document).on('click','div[data-category]',function(){
   arr =arr.filter(a=> a.value != $(this).data('value') && a.category != $(this).data('category'))
   arr.push({
     category:$(this).data('category'),
     value   :$(this).data('value'),
     color   :$(this).data('color')
   });
   
   console.log(arr)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-category="fruit" data-value="apple" data-color="yellow">Apple</div>
<div data-category="fruit" data-value="apple" data-color="green">Apple</div>
<div data-category="fruit" data-value="cherry" data-color="red">Cherry</div>
<div data-category="vegetable" data-value="tomato" data-color="red">Tomato</div>
<div data-category="vegetable" data-value="carrot" data-color="orange">Carrot</div>

Answer 2

获取使用dataset单击的项目数据，然后使用findIndex()检查是否存在相同的value的项目。

let arr = [];
let divs = document.querySelectorAll('div');
divs.forEach(div => {
  div.addEventListener('click',(e) => {
    let data = e.target.dataset;
    let ind = arr.findIndex(x => data.value === x.value);
    if(ind === -1) arr.push(data);
    else arr[ind] = data;
    console.log(arr)
  })
  
})

<div data-category="fruit" data-value="apple" data-color="yellow">Apple</div>
<div data-category="fruit" data-value="apple" data-color="green">Apple</div>
<div data-category="fruit" data-value="cherry" data-color="red">Cherry</div>
<div data-category="vegetable" data-value="tomato" data-color="red">Tomato</div>
<div data-category="vegetable" data-value="carrot" data-color="orange">Carrot</div>

Answer 3

var result = [];
Array.from(document.querySelectorAll("div")).forEach(link => link.addEventListener('click', function(event) {
  let category_name = this.getAttribute('data-category');
  let category_value = this.getAttribute('data-value');
  let category_color = this.getAttribute('data-color');
  var found = result.some(function(el) {
    return el.category_name === category_name && el.category_value === category_value;
  });
  if (!found) {
    result.push({
      category_name: category_name,
      category_value: category_value,
      category_color: category_color
    });
  } else {
    index = result.findIndex(x => x.category_name == category_name && x.category_value == category_value);
    result[index]['category_color'] = category_color;
  }
  console.log(result);
}))

<div data-category="fruit" data-value="apple" data-color="yellow">Apple</div>
<div data-category="fruit" data-value="apple" data-color="green">Apple</div>
<div data-category="fruit" data-value="cherry" data-color="red">Cherry</div>
<div data-category="vegetable" data-value="tomato" data-color="red">Tomato</div>
<div data-category="vegetable" data-value="carrot" data-color="orange">Carrot</div>