时间戳

首页 > 解决方案 > OnClick 元素使用 JS 填充数组

javascript - OnClick 元素使用 JS 填充数组

问题描述

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

<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 页面。

非常感谢。

标签： javascriptjqueryarrays

解决方案

我们可以使用您的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>

推荐阅读