将数据存储到元素中

我想知道如何将数据存储到某些html元素（如div）中。我可以将它存储在课程名称，ID名称中，但它如何与“数据”一起使用？如果我需要存储索引节点ID，名称，年等等，并通过jquery获取所有信息。Like for id $(this).attr('id');。谢谢将数据存储到元素中

来源

2016-05-15 Mr. Noob

你可以在你的DIV标签

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

</div>

添加数据属性同样做到这一点像ID，然后使用jQuery，如：

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

来源

2016-05-15 22:30:12 jewelfarazi

@先生在jQuery你也可以使用下面的表示法：'$（this）.data（'id'）;'检索以'data-'为前缀的属性。 – jwatts1980

您可能可以使用.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>

在这段代码中，您使用data-id值的DIV设置为找到dbvalues阵列中的数据元素。如果您要添加其他数据字段，或者如果要将数据库中的数据用于其他用途，则此后会更好地扩展。

来源

2016-05-15 22:17:21 jwatts1980

我只是写了同样的事情，你的答案是：），如果可能的话，给它投票 –

添加一个html div标记的小例子以及数据属性，这样他就可以理解它，它将如何看起来一样。 –

@Arsh它仍然不会伤害你的答案，特别是如果你有一些更多的信息添加。 OP可能更喜欢你对我的回答，或者给我一些upvote的爱 – jwatts1980

-1

您可以使用HTML5数据属性。

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

来源

2016-05-15 22:18:07

套装属性：$（ “＃DIVID”）ATTR（ “数据ID”，12）;

获取属性：var id = $（“＃divid”）。attr（“data-id”）;

来源

2016-05-15 22:27:46

将数据存储到元素中

回答

相关问题