我正在制作一个由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标签中使用自定义属性的人,主要是为了嵌入一些额外的数据用于javascript代码.
我希望收集一些关于是否使用自定义属性是一个好习惯的反馈,以及一些替代方案.
现在看来似乎真的可以简化既服务器端和客户端的代码,但它也不是W3C标准.
我们应该在我们的网络应用程序中使用自定义HTML属性吗？为什么或者为什么不？
对于那些认为自定义属性是好事的人:使用它们时要记住哪些事项？
对于那些认为自定义属性是坏事的人:你用什么方法来完成类似的事情？
更新: 我最感兴趣的是各种方法背后的推理,以及为什么一种方法比另一种更好的原因.我想我们都可以用4-5种不同的方式来完成同样的事情.(隐藏元素,内联脚本,额外类,从ids解析信息等).
更新2: 似乎HTML 5 data-属性功能在这里有很多支持(我倾向于同意,它看起来像一个可靠的选项).到目前为止,我还没有看到这个建议的反驳方式.使用这种方法是否有任何问题/陷阱？或者它只是对当前W3C规范的"无害"失效？
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>
然而,我应该是一个优选的方法.第一种方法更简洁,我猜测,并没有像搜索引擎和屏幕阅读器一样多.相反,第二种选择使得存储大量数据更容易,因此更加通用.它也符合标准.
我很好奇这个社区的想法是什么.你怎么处理这样的情况？第一种方法的简单性是否超过潜在的缺点(如果有的话)？
我是ASP.NET/MVC3的新手,我正试图弄清楚如何将我的JavaScript(包含C#)与HTML的其余部分分开.
如果我将它们放入.JS文件并使用脚本标记插入它们,那么它们的C#方面就会停止工作.在MVC 3 razor中分离包含C#代码的JavaScript代码的最佳方法是什么？
谢谢.
如果它们匹配wordList中的单词,我需要隐藏span元素.
HTML:
<span class="wordBank_Words">
<span word="hello"></span>
<span word="you"></span>
<span word="hi"></span>
</span>
JavaScript的:
wordList = ['hello', 'how', 'are', 'you'];
$('.wordBank_Words span').each(function (index, val) {
if ($(this).attr('word').match(wordList)) {
$(this).hide();
}
});
所以,如果做得正确,它应该隐藏'你好'和'你',但不是'你好'
如果我这样做match('hello'),这正确地隐藏了HTML元素列表中的'hello'范围.
但我需要循环遍历每个span元素wordBank_Words,并将它们与wordList中的每个单词进行比较,并且只有在匹配时才隐藏.无论顺序如何,都需要进行比较.
如何才能做到这一点？
什么是更好的？
var itemId=8;
$('#aaa').data('ItemId', itemId);
$('#aaa').attr('ItemId', itemId);
数据还是attr？