Question

所以，我有这样的不同元素：

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

对于元素的每次单击，我将元素的ID和其他一些信息放入数组中。

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是否已存在于数组中，以及如何使用最后单击的值对其进行更新？

最后，我想将此Ajax中的数组传递给PHP页面。

非常感谢。

Answer 1

我们可以轻松地使用您的roomid和Array.prototype.find

Array.prototype.find遍历数组并检查是否找到任何值。如果是这样，它将返回数组项。

如果您单击更改状态，它将在第一次显示undefined，然后在第二次之后显示数组条目。

var arr = [];

$('[data-action="change_status"]').click(function(event) {
    $(this).data('status', 'newValue');

    const arrElement = arr.find( (element) => {
      return element.current_roomid == $(this).data('roomid')
    });
    if (isInArray == undefined)
    {
      
      arr.push({
          current_status: $(this).data('status'),
          current_date: $(this).data('date'),
          current_roomid: $(this).data('roomid')
      });
    }
    else
    {
      //update
      arrElement["current_status"] = $(this).data('status');
      arrElement["current_date"] = $(this).data('date');
      arrElement["current_roomid"] = $(this).data('roomid');
    }
});

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

但是我建议在这里使用更多的SQL类型的方法。由于您拥有roomid，为什么不将其设为primary key。使用这种方法，我们可以跳过很多代码。

var roomObject = {};

$('[data-action="change_status"]').click(function(event) {
    $(this).data('status', 'newValue');
    const roomId = $(this).data('roomid');
    const dateValue = $(this).data('date');
    const statusValue = $(this).data('status');
    roomObject[roomId] = { current_status: statusValue,
                    current_date: dateValue,
                    current_roomid: roomId};
    //of course roomId is a little redundant now, but let's keep it there.
    console.log(roomObject);
});

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

Answer 2

您可以尝试下一种东西：

if (arr.filter(e => e.current_roomid === $(this).data('roomid')).length === 0) {
  arr.push({
     current_status: $(this).data('status'),
     current_date: $(this).data('date'),
     current_roomid: $(this).data('roomid')
   });
}

Answer 3

这比较简单。提交时收集数据

$('[data-action="change_status"]').on("click", function(event) {
  $(this).data('status', 'newValue');
  $(this).text('newValue');
  $(this).toggleClass("newValue")
});

$("#send").on("click", function() {

  let changes = [];
  $('[data-status]').each(function() {
    if ($(this).data("status") === "newValue") changes.push({
      "id": $(this).data("roomid"),
      "date": $(this).data("date")
    })
  })
  console.log(changes)
});

.newValue {
  background-color: green
}

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

OnClick on元素使用JS填充数组

3 个答案: