将数据存储到元素中

Storing data into elements

本文关键字：元素 存储 数据      更新时间：2023-09-26

我想知道如何将数据存储到像div这样的html元素中。我可以将其存储在类名、id名称中，但它如何处理"data"？如果我需要存储一些模式id、名称、年份等，并通过jquery获取所有信息。。与id $(this).attr('id');类似。感谢

通过在div标记中添加数据属性，可以像ID一样完成这一操作

<div id="elm" data-id="1" data-name="name" data-years="2016">
</div>

然后使用jQuery，比如：

$(this).attr('data-id');
$(this).attr('data-name');
$(this).attr('data-years');

您可以为此使用.data()方法。存储：

var obj = { 'name': 'John Smith', 'age': 25 };
$('#divid').data('customerInfo', obj);

然后检索：

var obj = $('#divid').data('customerInfo');
alert(obj.name); //<== alerts 'John Smith'

更新

有了关于使用PHP的更多信息，这里有一种替代的处理方法。data-属性可以工作，但可能没有您稍后要添加更多数据或需要在页面上的其他逻辑中获取这些值那样可扩展。

例如，如果要将大量数据点从PHP代码传递到HTML页面，最好将数据序列化为JSON，并将其设置为Javascript变量。

下面的SO回答提供了一个关于如何将数据库数据编码为JSON的示例。

<?php
$q = mysqli_query("SELECT ...");
$rows = array();
while($r = mysqli_fetch_assoc($q)) {
    $rows[] = $r;
}
echo '<script>var dbvalues = '.json_encode($rows).';</script>';
?>

然后只在div上设置data-id值。如果在div中添加data-id属性，并且数据库数据也包含id值，则可以使用该值来建立JSON数据和元素之间的连接。

<div id="div1" data-id="10">
    <button id="button1">Click Me</button>
</div>
<script>
    $(document).ready(function() {
        $("#button1").click(function() {
            var div = $(this).closest("div");
            var id = div.data("id");
            //This assumes dbvalues was set up somewhere in the document.
            $.each(dbvalues, function(index, value) {
                if (value.id == id) {
                    alert(value.name); //<==alerts the name associated
                    break;
                }
            });
        });
    });
</script>

在这段代码中，您使用div上设置的data-id值来查找dbvalues数组中的数据元素。如果有其他数据字段要添加，或者希望将数据库中的数据用于其他目的，则以后可以更好地扩展。

设置属性：$（"#diver"）.attr（"data id"，12）；

获取属性：var id=$（"#divide"）.attr（"data id"）；

您可以使用HTML5数据-atrributes。

http://ejohn.org/blog/html-5-data-attributes/

相关文章：