我正在做一个有javascript提供的一些交互的页面。举个例子:发送AJAX请求以获取文章内容的链接,然后在div中显示该数据。显然,在这个例子中,我需要每个链接存储一个额外的信息:文章的id。我处理它的方法是把这些信息放在href链接中:

<a class="article" href="#5">

然后使用jQuery找到a.article元素并附加适当的事件处理程序。(不要太纠结于可用性或语义,这只是一个例子)

不管怎样,这个方法是有效的,但是有点臭,而且根本不能扩展(如果click函数有多个参数会发生什么?如果其中一些参数是可选的呢?)

显而易见的答案是在元素上使用属性。我是说,这就是它们的作用,对吧?(种)。

<a articleid="5" href="link/for/non-js-users.html">

在我最近的问题中,我问这个方法是否有效,结果证明,如果不定义我自己的DTD(我没有),那么不,它是无效或不可靠的。一种常见的响应是将数据放入class属性中(尽管这可能是因为我选择的示例不佳),但对我来说,这种方法更有味道。是的,它在技术上是有效的,但它不是一个很好的解决方案。

我过去使用的另一种方法是实际生成一些JS,并将其插入到页面中的<script>标记中,创建一个与对象关联的结构。

var myData = {
    link0 : {
        articleId : 5,
        target : '#showMessage'
        // etc...
    },
    link1 : {
        articleId : 13
    }
};

<a href="..." id="link0">

但这是一个真正痛苦的屁股维护,通常只是非常混乱。

那么,要回答这个问题,如何为HTML标记存储任意信息?


当前回答

这就是我怎么做你ajax页面…这是一个非常简单的方法…

    function ajax_urls() {
       var objApps= ['ads','user'];
        $("a.ajx").each(function(){
               var url = $(this).attr('href');
               for ( var i=0;i< objApps.length;i++ ) {
                   if (url.indexOf("/"+objApps[i]+"/")>-1) {
                      $(this).attr("href",url.replace("/"+objApps[i]+"/","/"+objApps[i]+"/#p="));
                   }
               }
           });
}

它的工作原理是,它基本上会查看所有具有'ajx'类的url,它会替换关键字并添加#符号…所以如果js被关闭了,那么url就会像往常一样…所有“应用程序”(网站的每个部分)都有自己的关键字……所以我所需要做的就是添加到js数组上面添加更多的页面…

例如,我的当前设置设置为:

 var objApps= ['ads','user'];

因此,如果我有一个url,如:

www.domain.com/ads/3923/bla/dada/bla

js脚本将取代/ads/部分,所以我的URL将结束

www.domain.com/ads/ p = 3923 /爸爸/ bla bla

然后我使用jquery bbq插件加载相应的页面…

http://benalman.com/projects/jquery-bbq-plugin/

其他回答

一种可能是:

创建一个新的div来保存所有扩展/任意数据 做一些事情来确保这个div是不可见的(例如CSS加上一个div的class属性) 将扩展的/任意的数据放在[X]HTML标签中(例如,作为表格单元格中的文本,或其他任何你可能喜欢的内容),放在这个不可见的div中

在我以前的公司,我们一直使用自定义HTML标记来保存表单元素的信息。问题在于:我们知道用户被迫使用IE。

当时它在FireFox上运行得并不好。我不知道FireFox是否改变了这一点,但是请注意,读者的浏览器可能支持也可能不支持向HTML元素添加自己的属性。

如果你可以控制你的阅读器使用的浏览器(例如,一个公司的内部web applet),那么无论如何都要尝试一下。这又有什么坏处,对吧?

为什么不利用已有的有意义的数据,而不是添加任意的数据呢?

例如,使用<a href="/articles/5/page-title" class="article-link">,然后你可以通过编程方式获得页面上的所有文章链接(通过classname)和文章ID(匹配regex /articles\/(\d+)/ against this.href)。

这是个好建议。感谢@Prestaul

如果你已经在使用jQuery,那么你应该利用“数据” 方法,该方法是在对象上存储任意数据的推荐方法 dom元素。

非常正确,但是如果您想在普通的HTML中存储任意数据呢?还有另一种选择……

<input type="hidden" name="whatever" value="foobar"/>

将数据放在隐藏输入元素的name和value属性中。如果服务器正在生成HTML(即PHP脚本或其他东西),而您的JavaScript代码稍后将使用此信息,那么这可能是有用的。

不可否认,它不是最干净的,但它是一种选择。它与所有设备都兼容 浏览器,是有效的XHTML。你不应该使用自定义属性,也不应该使用带有“data-”前缀的属性,因为它可能不适用于所有浏览器。此外,您的文档将无法通过W3C验证。

我提倡使用“rel”属性。XHTML进行验证,很少使用属性本身,并且可以有效地检索数据。