我正在制作一个由javascript提供一些交互的页面.仅作为示例:发送AJAX请求以获取文章内容然后在div中显示该数据的链接.显然在这个例子中,我需要每个链接来存储额外的信息:文章的ID.我一直在处理它的方式是将这些信息放在href链接中:
然后我使用jQuery来查找a.article元素并附加相应的事件处理程序.(不要太在意这里的可用性或语义,这只是一个例子)
无论如何,这种方法有效,但它有点味道,根本不可扩展(如果click函数有多个参数会发生什么?如果其中一些参数是可选的,会怎样?)
显而易见的答案是在元素上使用属性.我的意思是,这就是他们的目的,对吗?(的种类).
在我最近的一个问题中,我问这个方法是否有效,结果是没有定义我自己的DTD(我没有),那么不,它是无效的或可靠的.一个常见的反应是将数据放入class
属性中(虽然这可能是因为我选择不当的例子),但对我而言,这更令人闻趣.是的,它在技术上是有效的,但它不是一个很好的解决方案.
我过去使用的另一种方法是实际生成一些JS并将其插入到标记的页面中,创建一个与该对象关联的结构.
var myData = { link0 : { articleId : 5, target : '#showMessage' // etc... }, link1 : { articleId : 13 } };
但这可能是维持对接的真正痛苦,而且通常只是非常混乱.
那么,为了解决这个问题,你如何为HTML标签存储任意信息?
您使用的是哪个版本的HTML?
在HTML 5中,拥有带有数据前缀的自定义属性是完全有效的,例如
在XHTML中,这不是真正有效的.如果您处于XHTML 1.1模式,浏览器可能会抱怨它,但在1.0模式下,大多数浏览器都会默默地忽略它.
如果我是你,我会遵循基于脚本的方法.你可以在服务器端自动生成它,这样就不会让后面的人感到痛苦.
如果您已经在使用jQuery,那么您应该利用"data"方法,这是使用jQuery在dom元素上存储任意数据的推荐方法.
存储东西:
$('#myElId').data('nameYourData', { foo: 'bar' });
要检索数据:
var myData = $('#myElId').data('nameYourData');
这就是它的全部内容,但请查看jQuery文档以获取更多信息/示例.
只是另一种方式,我个人不会用这个,但它的工作原理(保证您的JSON是有效的,因为的eval()是危险的).
{"id": 1, "title":"Something"} Text of Link // javascript var article = document.getElementsByClassName("article")[0]; var data = eval(article.childNodes[0].innerHTML);
任意属性无效,但在现代浏览器中完全可靠.如果您通过javascript设置属性,那么您也不必担心验证.
另一种方法是在javascript中设置属性.jQuery有一个很好的实用方法,只是为了这个目的,或者你可以自己推出.
几乎所有可能的浏览器都可以使用的hack是使用这样的开放类:
这更优雅,但打破标准,我不是100%肯定支持.很多浏览器都支持它,我认为IE6支持JS
访问但不支持CSS
selectors
(这在这里并不重要),也许某些浏览器会完全混淆,你需要检查它.
做序贯化和反序列化等有趣的事情会更加危险.
除了尝试复制标记之外,使用ids
纯JS
哈希主要起作用.如果您有tag
,通过标准
JS
方法复制它,然后尝试修改data
附加到一个副本,另一个副本将被修改.
如果您不复制tag
s或使用只读数据,这不是问题.如果您复制tag
s并且它们已被修改,您将需要手动处理它.
使用jquery,
储藏: $('#element_id').data('extra_tag', 'extra_info');
检索: $('#element_id').data('extra_tag');
我知道你现在正在使用jQuery,但如果你内联定义了onclick处理程序会怎样.然后你可以这样做:
Article 5
您可以使用隐藏的输入标记.我在w3.org上没有得到任何验证错误:
Hello
使用jQuery,你会得到类似(未经测试)的文章ID:
$('.article input[name=articleid]').val();
但如果可以选择,我会推荐HTML5.