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-*信息存储到数组中。

用户可能多次单击相同的项目但使用不同的颜色（例如：Apple）。在这种情况下，我应该使用最后单击的项目值更新数组，并删除旧的项目值。

所需的输出例如是这样的：

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

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

让我知道是否清楚。

实际上，这是我的代码：

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尝试一下。如果您需要在filter中添加更多条件，请

注意：Js array not like php associative array its called object in js。数组没有键值对.SO与对象而不是数组一起使用

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>

每次在JS元素上单击时填充一个数组

3 个答案: