如何根据数据属性访问数组

Question

所以我正在用 CloudkitJS 创建一个应用程序，我有一个关于如何获取用户数据的问题。因此用户可以创建任务，并且任务会附加到页面上的 div 以及来自该任务对象的数据。单击该任务 div 它会打开一个 html 元素的弹出窗口，该元素从 display:none 到 display:inline 块，弹出窗口内是来自附加的 div 被单击（innerText、innerHTML 等），但数组中的 divs 对象没有实际数据。显然那时只是 static html 。每个任务信息都存储在数组中的一个对象中。它们由记录名称标识。为简单起见，我将其设为 A、B、C、D。该记录存储在 div 的信息对象中。它还存储在 div 的数据记录属性中。因此，目标是在单击时文档在数组中查找一个对象，其中记录了被单击的数据记录是 div 的任何内容，并在可访问变量中从该对象带回所有内容。任何帮助、重定向或建议都会很棒。谢谢。如果我能说得更清楚，请告诉我。

LINK - https://jsfiddle.net/1uh395cv/24/

var task1 = {
                "info": "nope",
                "recordName": "A",
                "dueDate": "dueDate"
            };
 var task2 = {
                "info": "nope",
                "recordName": "B",
                "dueDate": "dueDate"
            };
 var task3 = {
                "info": "nope",
                "recordName": "C",
                "dueDate": "dueDate"
            };

Answer 1

您可以使用函数 find 和 $.data。

$(document).ready(function() {
  var task1 = {    "info": "nope",    "recordName": "A",    "dueDate": "dueDate"  };  var task2 = {    "info": "nope",    "recordName": "B",    "dueDate": "dueDate"  };  var task3 = {    "info": "nope",    "recordName": "C",    "dueDate": "dueDate"  };

  var tasksss = [task1, task2, task3];
  $('div').click(function() {
    var record = $(this).data('record');
    var found = tasksss.find(function(t) {
      return t.recordName === record;
    });
    
    console.log(found);
  });
});

[data-type="pinned"] {
  padding: 10px;
  border: 1px dashed green;
  margin: 3px;
  cursor: pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div data-type="pinned" data-record="A">
data-record="A"
</div>
<div data-type="pinned" data-record="B">
data-record="B"
</div>
<div data-type="pinned" data-record="C">
data-record="C"
</div>
<div data-type="pinned" data-record="D">
data-record="D"
</div>
<div class="modal" style="display:none">
  This div is hidden.
</div>

</html>

如何根据数据属性访问数组

How to access array based off of data attribute

html

javascript

css

jquery

cloudkit