Question

我正在开发一个使用ajax与服务器通信的Web应用程序。我的具体情况如下：

我在html页面中列出了一系列用户。在这些用户中，我可以执行以下操作：更改他们的“状态”或“从帐户中删除”。

在页面中存储有关以下内容的信息的良好做法是什么：

用户ID
用户的当前状态

P.S。：我正在使用jQuery。

Answer 1

有jQuery的数据功能

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

官方文件：http://docs.jquery.com/Data

Answer 2

关于什么是最好用的，存在很多争论。你可以通过很多方式存储数据，并且它们都能让人高兴 - 自定义属性当然不会验证你是否使用XHTML，并且使用类来存储一两位数据最多是笨拙而只会变得更糟你想知道多少事情。就个人而言，我不仅不是XHTML的忠实粉丝，我也不是一个验证纳粹，所以我建议使用自定义属性。

但是，有一个选项可以将自定义属性与标准data-属性进行协调。作为John Resig（jQuery的作者）writes about in his blog，这是HTML5中引入的一个新属性，允许您使用data-前缀指定custom data attributes。所以一个完全有效的元素可能如下所示：

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

这有一个好处，当你仍在使用可能的自定义属性时，如果你使用XHTML，你的代码将会很好地老化，因为这是我们将要存储的方式与未来特定项目相关的数据。

进一步阅读是Attributes > Classes: Custom DOM Attributes for Fun and Profit.

Answer 3

也许使用自定义属性，因此对于用户的列表元素，添加变量的属性：

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

然后可以使用attr函数获取值：

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

并且

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

注意：选择器需要更改，显然

请注意，对自定义属性的使用有不同的意见 - 但是，这对每个主要浏览器都应该没问题。这也是我能想到的最简单的解决方案。它不需要跳转到兄弟元素来获取数据，或者在附近找到元素，这些都可以为处理添加少量开销 - 我尝试最小化在执行此类操作时添加到DOM中的额外膨胀量。 / p>

Answer 4

jQuery数据

如果要针对jQuery对象存储自定义数据，请使用data function。

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

HTML5数据 - *属性

您也可以使用HTML5 data-*属性，但访问这些属性的API仅受不同浏览器的部分支持。 Here's some more information about that

<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 selectors查询列表，并查找包含用户项目的html块，这些用户项目具有与您要查询的元数据相匹配的相关隐藏字段。

Answer 5

在这种情况下，我认为自定义属性可能过度。您可以将用户ID存储在 id - 属性中，因为列表中只有一个用户实例，对吧？此外，用户的状态可以存储在类 - 属性中。通过这种方式，每个用户可以在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

Answer 6

jquery的metadata插件就是你的答案。

<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>

Answer 7

根据您存储的数据类型以及您在页面中存储的信息量，有多种方法可以执行此操作。最好设计一个一致的方案，这样你就可以编写一个简单的库调用来完成工作。例如，

您可以将数据存储在特定元素的类中。这可能需要额外的包装元素，以便能够提供额外的类来驱动您的CSS。这也限制了可存储的内容格式。用户ID可能很适合类属性。

您可以将数据存储在Javascript激活链接的未使用的href中。这具有额外的功能，即在状态栏中显示数据作为翻转时URL的一部分。例如，你可以在href中存储'＃userid'或甚至'userid'。

您可以将数据存储在其他元素中。例如，您可以使用一个嵌套的div，其中一个类指示存储，该类也会触发CSS以将元素从显示中取出。这是您可以在页面中安排的最全面和最广泛的支持。

您也可以使用type =“hidden”的嵌套输入标记，而不是嵌套的div。这是更期望/传统的，并且不需要CSS将它们从显示器中取出。您可以使用id属性来标识这些输入，也可以使用页面上的位置。例如，将它们放在用户单击的链接中，然后只在onclick处理程序中的当前链接内搜索。

Answer 8

为了回答“如何将其置于文档中”的问题，我建议采用与此类似的布局：

<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。

html＆amp; javascript：如何存储引用html元素的数据

8 个答案: