addClass从jQuery转换为MooTools

时间:2013-08-31 21:01:08

标签: jquery mootools addclass

我有使用MooTools 1.4的Joomla的Kunena论坛模板。我集成了这个主题引导工具提示功能,并添加了MooTools addClass来触发某些类中的工具提示。我检查了MooTools文档,代码如下所示:

$$('h3 a, .tk-page-header h1 .tk-latestpost a, .tk-topic-title a, .tk-topic-info a, .tk-preview-avatar a, .tk-social-icons a, .kpost-user-icons a, .kicon-profile, .tk-user-info-body li a, span.kkarma-plus, span.kkarma-minus, .btnImage').addClass(' hasTooltip');

上面的代码可以在http://jsfiddle.net/AgpbL/上看到(滚动到底部)

不幸的是它不起作用,所以我创建了以下jQuery脚本

jQuery(document).ready(function(a){
   a("h3 a, .tk-page-header h1 .tk-latestpost a, .tk-topic-title a, .tk-topic-info a, .tk-preview-avatar a, .tk-social-icons a, .kpost-user-icons a, .kicon-profile, .tk-user-info-body li a, span.kkarma-plus, span.kkarma-minus, .btnImage").addClass(" hasTooltip");   
});
(jQuery);

它本身效果很好。不幸的是它导致与MooTools发生冲突所以我回到了MooTools并且(在搜索了stackoverflow之后)我创建了另一个代码:

$$('h3 a, .tk-page-header h1 .tk-latestpost a, .tk-topic-title a, .tk-topic-info a, .tk-preview-avatar a, .tk-social-icons a, .kpost-user-icons a, .kicon-profile, .tk-user-info-body li a, span.kkarma-plus, span.kkarma-minus, .btnImage').addEvents({
  'mouseenter': function() { $(this).addClass(' hasTooltip'); },
  'mouseleave': function() { $(this).removeClass(' hasTooltip'); }
}); 

并且再没有效果。

比较基本的myElement.addClass(className); MooTools和.addClass( className ) jQuery我找不到很大的差异,但显然有些问题我无法理解。

非常感谢任何帮助或指向其他地方。

1 个答案:

答案 0 :(得分:1)

不确定您是否与jQuery发生冲突,但您可以使用Mootools .getElements()而不是$$,而您不需要像jQuery那样包装this。试试这个:

document.getElements('h3 a, .tk-page-header h1 .tk-latestpost a, .tk-topic-title a, .tk-topic-info a, .tk-preview-avatar a, .tk-social-icons a, .kpost-user-icons a, .kicon-profile, .tk-user-info-body li a, span.kkarma-plus, span.kkarma-minus, .btnImage').addEvents({
  'mouseenter': function() { this.addClass('hasTooltip');},
  'mouseleave': function() { this.removeClass('hasTooltip');}
});

编辑: 我看到我建议的代码是在线和工作的。这个问题,我现在明白了,除非它已经准备好DOM,否则它是无用的,因为jQuery希望将它包含在工具提示中。这让我想到了下一个问题:这是你想要的吗? enter image description here

如果您想要的是在所有这些元素中都有工具提示,那么您需要在jQuery附加工具提示之前将该类添加到这些元素。所以忽略上面的代码并使用:

document.getElements('h3 a, .tk-page-header h1 .tk-latestpost a, .tk-topic-title a, .tk-topic-info a, .tk-preview-avatar a, .tk-social-icons a, .kpost-user-icons a, .kicon-profile, .tk-user-info-body li a, span.kkarma-plus, span.kkarma-minus, .btnImage').addClass('hasTooltip');

在此代码jQuery('.hasTooltip').tooltip({"container": false});之前使用此代码,它似乎位于索引页的头部。

我认为你不会在这里遇到框架冲突,只是一个复杂的页面,其中有很多小工具可能会丢失:)