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

标签 javascript jquery html css cloudkit

所以我正在使用 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/

相关文章:

HTML div 超出父容器的最大高度

html - bootstrap carousel active item 内的文本与外部文本对齐

javascript - 在 AngularJS 中动态加载 View 和 Controller

Javascript:鼠标悬停功能不适用于 div

javascript - 如何在 HTTP 响应中包含嵌套模型?

javascript - 通过 javascript 从 http 页面调用同一站点的 https url 时出现 "Access-Control-Allow-Origin"问题

javascript - 在 body 上使用 addEventListener 绑定(bind)滚动事件不起作用。为什么?

jquery - 如何在 jQuery 中获取用户输入并在其中使用?

javascript - Mozilla Firefox 附加组件 Android - 页面操作不工作

html - 如何使用拉伸(stretch) 100% 高度的渐变效果在 html/css 中制作垂直边框