Question

我想知道如何将数据存储到像div这样的html元素中。我可以将它存储在类名，id名称中，但它如何与“数据”一起使用？如果我需要存储someode id，name，years等，并通过jquery获取所有信息..就像id $(this).attr('id');一样。感谢

Answer 1

您可以使用.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 answer给出了如何将数据库数据编码为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值。如果将data-id属性添加到div并且数据库数据还包含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数组中的数据元素。如果您要添加其他数据字段，或者您希望将数据库中的数据用于其他目的，则以后可以更好地扩展。

Answer 2

您可以通过在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');

Answer 3

设置属性：$（＆＃34; #divid＆＃34;）。attr（＆＃34; data-id＆＃34;，12）;

获取属性：var id = $（＆＃34; #divid＆＃34;）。attr（＆＃34; data-id＆＃34;）;

Answer 4

您可以使用HTML5数据 - atrributes。

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

将数据存储到元素中

4 个答案: