將數據存儲到元素中

我想知道如何將數據存儲到某些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

將數據存儲到元素中

回答

相關問題