Question

在对元素执行.click操作期间，我创建了一个像这样的数组：

var arr = [];

$('[data-action="change_status"]').click(function(event) {
    $(this).data('status', 'newValue');

    arr.push({
        current_status: $(this).data('status'),
        current_date: $(this).data('date'),
        current_roomid: $(this).data('roomid')
    });
});

因此，每次单击元素时，我都会将该元素的ID和其他一些信息放入数组中。

我的问题是，如果用户在同一元素上单击两次，它将在此数组中创建两行。如何检查ID是否已存在于数组中，以及如何使用上次单击的值对其进行更新？

这是我的HTML：

<div class="dateClose" data-action="change_status" data-date="2019-03-02" data-roomid="45" data-status="Close">Change status</div>
<div class="dateClose" data-action="change_status" data-date="2019-03-02" data-roomid="46" data-status="Open">Change status</div>
<div class="dateClose" data-action="change_status" data-date="2019-03-03" data-roomid="46" data-status="Close">Change status</div>
<div class="dateClose" data-action="change_status" data-date="2019-03-03" data-roomid="47" data-status="Open">Change status</div>

谢谢。

Answer 1

使用通过每个元素唯一的索引而不是数组索引的对象，例如，使用roomid：

const obj = {};

$('[data-action="change_status"]').click(function(event) {
    $(this).data('status', 'newValue');
    const current_roomid = $(this).data('roomid');
    obj[current_roomid] = {
        current_status: $(this).data('status'),
        current_date: $(this).data('date'),
        current_roomid
    };
});

如果没有什么东西足够可靠地恒定，则可以改用Map，它允许使用非基本键（例如元素）：

const map = new Map();

$('[data-action="change_status"]').click(function(event) {
  $(this).data('status', 'newValue');
  const current_roomid = $(this).data('roomid');
  map.set(this, {
    current_status: $(this).data('status'),
    current_date: $(this).data('date'),
    current_roomid
  });
});

实时摘要：

const map = new Map();

$('[data-action="change_status"]').click(function(event) {
  $(this).data('status', 'newValue');
  const current_roomid = $(this).data('roomid');
  map.set(this, {
    current_status: $(this).data('status'),
    current_date: $(this).data('date'),
    current_roomid
  });
  console.log(map.size);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dateClose" data-action="change_status" data-date="2019-03-02" data-roomid="45" data-status="Close">Change status</div>
<div class="dateClose" data-action="change_status" data-date="2019-03-02" data-roomid="46" data-status="Open">Change status</div>
<div class="dateClose" data-action="change_status" data-date="2019-03-03" data-roomid="46" data-status="Close">Change status</div>
<div class="dateClose" data-action="change_status" data-date="2019-03-03" data-roomid="47" data-status="Open">Change status</div>

如果jQuery中已存在数组中的特定元素，则更新它

1 个答案: