我正在制作一个由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标签存储任意信息？
HTML(或者只是XHTML？)在标签上的非标准属性方面相对严格.如果它们不是规范的一部分,那么您的代码将被视为不符合规范.
然而,非标准属性对于将元数据传递给Javascript非常有用.例如,如果假设链接显示弹出窗口,则可以在属性中设置弹出窗口的名称:
<a href="#null" class="popup" title="See the Popup!"
popup_title="Title for My Popup">click me</a>
或者,您可以将弹出窗口的标题存储在隐藏元素中,例如span:
<style>
.popup .title { display: none; }
</style>
<a href="#null" title="See the Popup!" class="popup">
click me
<span class="title">Title for My Popup</span>
</a>
然而,我应该是一个优选的方法.第一种方法更简洁,我猜测,并没有像搜索引擎和屏幕阅读器一样多.相反,第二种选择使得存储大量数据更容易,因此更加通用.它也符合标准.
我很好奇这个社区的想法是什么.你怎么处理这样的情况？第一种方法的简单性是否超过潜在的缺点(如果有的话)？
一个非常普遍的问题.
我正在动态生成一个表单,该表单使用HTML/JavaScript分成多个级别的选项卡.
我想使用CSS和background-image突出显示某些字段(具有与全局模板不同的值的字段)和星号*符号.
JS字段遍历每个字段,比较其值,并在必要时为其设置CSS类.到现在为止还挺好.
此外,我不仅希望每个更改的字段都标有星号,还要标记它所在的选项卡.
因为我喜欢它简单,我想将选项卡的元素ID存储为每个字段的HTML标记中的某个属性(类似"parentTab").JS函数然后突出显示该字段及其"parentTab"元素(也可能是那个"parentTab").
我的第一种方法是滥用"title"属性或somethiong来存储parentTab.当然,这很脏.但是,如果我只是将任意属性添加到DIV或INPUT标记中,它将不再验证,我觉得访问这些属性的安全性不足 - 谁知道不同的浏览器如何处理它,并将来会处理它？
所以我的问题是:是否有一种有效的,符合标准的方式 - 某种属性 - 将任意数据存储在HTML标记内,以便通过JavaScript进一步处理？
当然,我可以创建一个"parentTabs"JS数组并完成它.但是将它存储在输入本身会更加优雅.