在 html/javascript 中这样用是否合法? 如果不合法有没有通用方便的解决方案呢？

This topic created in 5374 days ago, the information mentioned may be changed or developed.

举例，列表中的
<ul>
<li><a article_id="1" class="xxx">1234567</a></li>
<li><a article_id="2" class="xxx">1234567</a></li>
<li><a article_id="4" class="xxx">1234567</a></li>
<li><a article_id="55" class="xxx">1234567</a></li>
<li><a article_id="6" class="xxx">1234567</a></li>
</ul>

这样做的目的是想一下子将所有条目绑定事件，并引用id：
$('.xxx').click(function(){
var article_id=$(this).attr('article_id');
//....利用 article_id 做一些事..
});

像例子里 article_id 这种不存在的 html 属性是否合法呢？
如果不合法，那么有没有其他的办法能够达到上述效果呢？

article

16 replies • 1970-01-01 08:00:00 +08:00

cynial

Aug 28, 2011

为什么不直接用id属性呢

Hyperion

Aug 28, 2011

加 data-article_id , HTML5里可以这么干...
http://www.w3.org/TR/html5/elements.html#embedding-custom-non-visible-data-with-the-data-attributes

xhtml, 我估计会通不过严格检查吧...

raptium

Aug 28, 2011

http://www.w3.org/TR/html5/elements.html#embedding-custom-non-visible-data-with-the-data-attributes

raptium

Aug 28, 2011

啊呀发慢了…… 还不能删除～～

Hyperion

Aug 28, 2011

@raptium 同步了... /握手

chloerei

Aug 28, 2011 via Android

xhtml已死，不用考虑
不考虑老浏览器的话用data-

orzzzzz

Aug 28, 2011

自定义属性是可以用的.....

chuck911

Aug 28, 2011

1. XHTML, with a specific namespace
http://www.bennadel.com/blog/1453-Using-jQuery-With-Custom-XHTML-Attributes-And-Namespaces-To-Store-Data.htm
<html ... xmlns:xyz="http://www.yourdomain.com">
... <a xyz:article_id="11">...

2. $.data()
The jQuery.data() method allows us to attach data of any type to DOM elements

3. Custom DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
[
<!ATTLIST a article_id CDATA #IMPLIED>
]>

4. html5 data-*
<a data-article_id="55" class="xxx">1234567</a>

darasion

Aug 28, 2011

hi all,

当然要考虑通用了. html5虽然很好, 但是用户不用它也白搭呀.

Hyperion

Aug 28, 2011

@chuck911 自定义命名空间, 自定义DTD么...

darasion

Aug 28, 2011

@chuck911 多谢这个..

chuck911

Aug 28, 2011

我觉得XHTML自定义namespace的方案比较方便且通用
jQuery.data()在你这个情况可能不方便了，article_id是服务端生成的吧

loading

Aug 28, 2011

建议通过 href 来操作。
<a href="#mark1" >xxxx</a>
<a href="#mark2" >xxxx</a>

或者通过 class，class="xxx mark1 mark2 ..."

darasion

Aug 28, 2011

@loading 谢谢, 这样做的好处是？

loading

Aug 28, 2011

@darasion 我不知道你用来做什么，如果只是要个标记，开关什么的，这样较为简单。
如果是较多的数据，直接ajax就好了。json很方便的。放那么多不是给用户看的控制数据到html干什么

chloerei

Aug 28, 2011

http://caniuse.com/#feat=dataset

Note: All browsers can already use data-* attributes and access them using getAttribute. "Supported" refers to accessing the values using the dataset property.

在 html/javascript 中这样用 是否 合法? 如果不合法有没有通用方便的解决方案呢？

在 html/javascript 中这样用是否合法? 如果不合法有没有通用方便的解决方案呢？