我是 MooTools 的新手,需要更改一些现有代码(通常我使用的是 jQuery)。
当我使用 MooTools 搜索 dom 时,仅在 IE 中我会得到其他结果(无效结果)。
部分 html 源代码例如:
<a class="dmnmlk" rel="dmnml='post'" /></a>
<a href="#" /></a>
<a href="#" /></a>
<a class="blueLink" rel="external" href="http://www.linkedin.com" /></a>
<a rel="external,twitter='txxxxxxxxxxxxxxxxx',data={'border-color':'#634e42','chrome':'noheader nofooter transparent',polite:'polite',limit:10}" class="twitter-timeline" href="https://twitter.com/test" /></a>
<a rel="mlink" /></a>
<a rel="mlink" /></a>
<a rel="mlink" /></a>
<a rel="mlink" /></a>
<a><span /></a>
<a rel="mlink" /></a>
<a rel="mlink" class="selected" /></a>
<a rel="mlink" class="selected" /></a>
<a rel="mlink" class="selected" /></a>
<a rel="svg" class="sprites menuLogo" href="#" title="Go to startpage" /></a>
<div class="resources hidden">
<div class="dialog">
.............
<a class="button" rel="modalresult='ok'>OK</a>
<a class="button" rel="modalresult='cancel'>Cancel</a>
</div>
var aElems = $('a[rel]:not(.resources a[rel],.disabled),a[href*="#"]:not(a[rel])');
alert( aElems.length );
在 IE 以外的其他浏览器中:计数为 14 在 IE 中:计数为 2
我正在使用最新的 mootools 版本。
有人可以解释发生了什么吗?我该怎么办?
编辑:我尝试做的解释:
我在 html 中扫描带有 rel 标记的链接以将功能绑定到它。我知道您现在可以在 HTML5 中使用 data 属性,但这必须在较旧的 IE 版本中工作(我使用严格的 XHTML)。我这样做有几个原因:
速度很快,只扫描一次 DOM
可扩展性,当html中不存在具有特定名称的rel属性时,永远不会执行关联的函数
紧凑,所有功能都可以放在一个文件中而不冲突,非常干净清晰
可以与动态的东西一起使用 ajax,对话框,功能可以在加载新的 html 时自动绑定,而无需设计特定的功能,因为它已经在 rel 属性中指定。
稳定性,如果一个函数不存在或者rel属性不存在,代码不会中断。
我使用这种技术已经好几年了(使用 jQuery),它非常方便,我称之为“AjaxQuery”,例如:
// Extend the ajaxquery class
TAjaxQuery.prototype.setupPage = function() // Will be called automaticly
{
var o = this;
o.onAjaxFoundRelAttrMlink = function( oSender, oData ) // Called when rel="mlink" is found
{
// oData.target // Target element
// oData.rel.mlink // parsed rel attribute
$(oData.target).bind( 'click', function(e) // i know this is jquery
{
// do something
});
// ..... etc
};
};
资源可以是对话框,因此必须仅在可见时绑定功能。这就是资源中带有 rel 属性的链接在启动时必须不绑定的原因。对话是动态的。这就是为什么not(.resources a[rel])
在搜索查询中。
我希望你能明白。