所以我正在使用 CloudkitJS 创建一个应用程序,我有一个关于如何获取用户数据的问题。因此用户可以创建任务,并且任务会附加到页面上的一个 div 中,其中包含来自该任务对象的数据。单击该任务 div 时,它会打开一个 html 元素的弹出窗口,该元素从 display:none 到 display:inline-block,弹出窗口内部是来自被单击的附加 div 的数据(innerText、innerHTML 等),但没有实际来自数组中的 div 对象的数据。显然那时只是静态 html。每个任务信息都存储在数组中的一个对象中。它们由记录名称标识。为简单起见,我将其设为 A、B、C、D。该记录存储在 div 信息的对象中。它还存储在 div 的数据记录属性中。因此,目标是在单击时文档在数组中查找一个对象,该对象记录了被单击的数据记录是什么 div,并从该对象返回一个可访问变量中的所有内容。任何帮助、重定向或建议都会很棒。谢谢。如果我能说得更清楚,请告诉我。
链接 - 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"
};
最佳答案
您可以使用函数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>
关于javascript - 如何根据数据属性访问数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49311824/