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

Posted

技术标签:

【中文标题】如何根据数据属性访问数组【英文标题】:How to access array based off of data attribute 【发布时间】:2018-03-16 01:26:25 【问题描述】:

所以我正在使用 CloudkitJS 创建一个应用程序,并且我有一个关于如何获取用户数据的问题。因此,用户可以创建任务,并将任务附加到页面上的 div 中,其中包含来自该任务对象的数据。单击该任务 div 时,它会打开一个 html 元素的弹出窗口,该元素从 display:none 到 display:inline-block,弹出窗口内是来自被点击的附加 div 的数据(innerText、innerHTML 等),但没有实际来自数组中 divs 对象的数据。显然那时只是静态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"
            ;

【问题讨论】:

您应该将一个属性绑定到数组的索引,以便它知道需要检索哪个元素 【参考方案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>

【讨论】:

以上是关于如何根据数据属性访问数组的主要内容,如果未能解决你的问题,请参考以下文章

数据结构:使用面向对象模拟数组

如何根据条件访问类属性

循环访问核心数据对象数组时随机访问日期类型属性失败

如何访问结构数组中的值?

如何对具有动态属性的数组进行排序? [复制]

如何使用核心数据访问保存在不同视图控制器中的数组?