堆棧內存溢出
  簡體   English   中英

html＆javascript：如何存儲引用html元素的數據

[英]html & javascript: How to store data referring to html elements

 原文  2009-06-01 11:35:34  7   8    javascript/ jquery/ html

問題描述

我正在開發一個使用ajax與服務器通信的Web應用程序。 我的具體情況如下：

我有一個在html頁面中列出的用戶列表。 在這些用戶中，我可以執行以下操作：從帳戶中更改他們的“狀態”或“刪除”他們。

在頁面中存儲有關以下內容的信息的良好做法是什么：

  • 用戶ID
  • 用戶的當前狀態

PS：我正在使用jQuery。

8 個解決方案

解決方案1
 17  2009-06-01 11:50:08

有jQuery的數據功能 

$('li').data('userid',uid); // sets the value of userid
uid = $('li').data('userid'); // retrieves the value of userid

官方文檔： http ： //docs.jquery.com/Data

解決方案2
 9  2009-06-03 05:00:39

關於什么是最好用的，存在很多爭論。 你可以通過很多方式存儲數據，並且它們都能讓人高興 - 自定義屬性當然不會驗證你是否使用XHTML，並且使用類來存儲一兩位數據最多是笨拙而只會變得更糟你想知道多少事情。 就個人而言，我不僅不是XHTML的忠實粉絲，我也不是一個驗證納粹，所以我建議使用自定義屬性。

但是，有一個選項可以將自定義屬性與標准協調： data-屬性。 正如John Resig（jQuery的作者） 在他的博客中所寫 ，這是HTML5中引入的一個新屬性，允許您使用data-前綴指定自定義數據屬性 。 所以一個完全有效的元素可能如下所示： 

<ul>
    <li data-userid='5' data-status='active'>Paolo Bergantino</li>
</ul>

這有一個好處，即當你仍在使用自定義屬性時，如果你使用XHTML 可能會很糟糕，你的代碼將會很好地老化，因為這是我們將來存儲與特定項目相關的數據的方式。

進一步閱讀的是Attributes> Classes：Fun and Profit的自定義DOM屬性。

解決方案3
 5  2009-06-01 11:41:08

也許使用自定義屬性，因此對於用戶的列表元素，添加變量的屬性： 

<li uid="theuserid" ustatus="thestatus"></li>

然后可以使用attr函數獲取值： 

$("li").attr("uid")

和 

$("li").attr("ustatus")

注意：顯然需要更改選擇器

請注意，對自定義屬性的使用有不同的意見 - 但是，這對每個主要瀏覽器都應該沒問題。 這也是我能想到的最簡單的解決方案。 它不需要跳轉到兄弟元素來獲取數據，或者在附近找到元素，這些都可以為處理添加少量開銷 - 我嘗試最小化在執行此類操作時添加到DOM的額外膨脹量。

解決方案4
 5  2009-06-01 11:46:20

jQuery數據

如果要針對jQuery對象存儲自定義數據，請使用數據函數 。 

$('#myField').data('name', 'Jack');
var name = $('#myField').data('name');

HTML5數據 - *屬性

您也可以使用HTML5 data-*屬性，但訪問這些屬性的API僅受不同瀏覽器的部分支持。 這里有一些關於它的更多信息 。 

<div data-userid="123" class="user-row">

編程方式： 

$('#myElement').attr('data-fruit', 'apple');
// or
document.getElementById('myElement').dataset.fruit = 'apple';

隱藏的領域

如果您想以舊的瀏覽器兼容方式執行操作並將元數據直接填充到html中，則可以使用隱藏字段。 它有點粗糙但很容易做到。 

<input type="hidden" name="UserID" value="[userid]" />

您可以輕松使用jQuery選擇器查詢列表並查找包含用戶項的html塊，這些用戶項具有與您要查詢的元數據匹配的相關隱藏字段。

解決方案5
 2  2009-06-01 12:29:53

在這種情況下，我認為自定義屬性可能有點過分。 您可以將user-id存儲在id -attribute中，因為列表中只有一個用戶實例，對吧？ 此外，用戶的狀態可以存儲在類 -attribute中。 通過這種方式，每個用戶可以在CSS中被賦予不同的樣式，例如綠色表示活動，黃色表示未激活的帳戶，紅色表示暫停的帳戶。

但是，與使用自定義屬性相比，獲取狀態的代碼會稍微復雜一些（但僅當您還希望擁有多個類時）。 從更積極的方面來說，HTML將使用這種方法進行驗證，而不會使用自定義屬性。 

<ul id="userList">
    <li id="uid123" class="active">UserName X</li>
    <li id="uid456" class="suspended">Mr. Troll</li>
</ul>

/**
 * Simple function for searching (strict) for a value in an array
 * @param array arr The array to look in
 * @param mixed val The value to look for in arr. Note that the value is looked for using strict comparison
 * @return boolean true if val is found in arr, else false
 */
function searchArray(arr, val) {
    for(var i = 0, len = arr.length; i < len; i++) {
        if(arr[i] === val) {
            return true;
        }
    }
    return false;
}

/**
 * Gets a known status from a string of class names. Each class name should be separated
 * by a space.
 * @param string classNames The string to check for a known status
 * @return string|false The status if found in classNames, else false
 */
function getStatus(classNames) {
    // The different statuses a user can have. Change this into your own!
    var statuses = ['active', 'suspended', 'inactive'], 
        nameArr = classNames.split(" ");
    for(var i = 0, nameLen = nameArr.length; i < nameLen; i++) {
        // If we find a valid status among the class names, return it
        if(searchArray(statuses, nameArr[i])) {
            return nameArr[i];
        }
    }
    return false; // We didn't find any known status in classNames
}

var id = $("li").attr("id"); // Fetches the id for the first user
var status = getStatus($("li").attr("class")); // Fetches the status of the first user

解決方案6
 2  2009-06-03 04:32:31

jquery的元數據插件就是你的答案。 

<html >
<head>
<script src="/js/jquery-1.3.2.js"></script>
<script src="/js/jquery.metadata.js"></script>
</head>
<body>
<ul>
<li type="text" class="{UID:'1',status:'alive'}">Adam</li>
<li type="text" class="{UID:'2',status:'alive'}">Bob</li>
<li type="text" class="{UID:'3',status:'alive'}">Carol</li>
</ul>
<script>
$('li').each(function(){window.console.log($(this).metadata().UID)});
</script>
</body>
</html>

解決方案7
 1  

有多種方法可以實現，具體取決於您存儲的數據類型以及您在頁面中存儲的信息量。 最好設計一個一致的方案，這樣你就可以編寫一個簡單的庫調用來完成工作。 例如，

您可以將數據存儲在特定元素的類中。 這可能需要額外的包裝元素，以便能夠提供額外的類來驅動您的CSS。 這也限制了可存儲的內容格式。 用戶ID可能很適合類屬性。

您可以將數據存儲在Javascript激活鏈接的未使用的href中。 這具有額外的功能，即在狀態欄中顯示數據作為翻轉時URL的一部分。 例如，您可以在href中存儲'＃userid'或甚至'userid'。

您可以將數據存儲在其他元素中。 例如，您可以使用一個嵌套的div，其中一個類指示存儲，該類也會觸發CSS以將元素從顯示中取出。 這是您可以在頁面中安排的最一般和最廣泛的支持。

您也可以使用type =“hidden”的嵌套輸入標記，而不是嵌套的div。 這是更期望/傳統的，並且不需要CSS將它們從顯示器中取出。 您可以使用id屬性來標識這些輸入，也可以使用頁面上的位置。 例如，將它們放在用戶單擊的鏈接中，然后只在onclick處理程序中的當前鏈接內搜索。

解決方案8
 1  2009-06-01 12:40:01

要回答“如何將其置於文檔中”的問題，我建議使用類似於此的布局： 

<ul id="users">
    <li id="someUserId" class="someStatus">Some Username</li>
    <li id="someOtherUserId" class="someOtherStatus">Some Username</li>
</ul>

這使您可以輕松選擇有關用戶的大量信息： 

$('#users > li') // all user elements
$('.someStatus') // all users of a particular status

然后在您的事件處理程序中，它也很容易獲得當前狀態： 

$(this).attr('class') //get current status once you have a user element selected.

另一種方法是將javascript轉儲到頁面，只需讓頁面加載時就使用jquery data功能來存儲數據。 你仍然需要元素上的id才能找到合適的ID。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 僅通過ID引用Javascript中的HTML元素 如何使用 JavaScript 和 HTML 使用 localStorage 存儲數據？ 如何在Python中存儲從Javascript動態生成的HTML表單元素？ 如何使用JavaScript將HTML用戶輸入數據存儲到Excel中 如何使用 JavaScript 在 html 文件中存儲數據 如何在Javascript中附加HTML元素？ 如何交換javascript中的HTML個元素？ 如何在控制台中將HTML元素存儲為全局變量 如何動態存儲有關HTML元素的信息？ 使用HTML標簽存儲“ javascript的數據”嗎？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM