从jQuery到MooTools的addClass转换 [英] addClass converting from jQuery to MooTools

问题描述

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

I have Kunena forum template for Joomla that use MooTools 1.4. I integrated in this theme bootstrap tooltip functionality and added MooTools addClass to trigger tooltips in some classes. I checked MooTools doc's and the code should looks like below:

$$('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/上看到上面的代码(滚动到底部)

Above code can be seen on http://jsfiddle.net/AgpbL/ (scroll to the bottom)

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

Unfortunately it doesn't work, so I created the following jQuery script

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之后)创建了另一个代码:

and it works very well itself. Unfortunately it cause a conflict with MooTools so I went back to MooTools and (after searching stackoverflow) I created another code:

$$('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进行比较，我找不到很大的区别，但是显然有些错误是我无法理解的.

Comparing basic myElement.addClass(className); MooTools to .addClass( className ) jQuery I couldn't find big differences but obviously something is wrong I'm not able to understand.

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

Any help or pointing to elsewhere is much appreciated.

推荐答案

不确定您与jQuery的冲突是什么，但是您可以使用Mootools

Not sure were your conflict with jQuery is but you can use Mootools .getElements() instead of $$ and you don't need to wrap this like in jQuery. Try 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希望将其包含在工具提示中.这将我带到下一个问题:这是您想要的吗?

I see the code I suggested is online and working. The problem, and I understood now, is that class is useless unless its there from DOM ready because jQuery want's to include it in tooltips. This takes me to the next question: Is this what you want?

如果要在所有这些元素中都有一个工具提示，则需要在jQuery将工具提示附加到这些元素之前添加类.因此，请忽略上面的代码并使用:

If what you want is to have a tooltip in all those elements then you need to add the class before jQuery attached tooltip to those elements. So ignore the code above and use:

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});之前使用它，该代码似乎在索引页的开头.

Use this before this code jQuery('.hasTooltip').tooltip({"container": false}); which seems to be in the head of the index page.

我认为您在这里没有框架冲突，只是一个复杂的页面，里面有很多漂亮的小工具，让您迷失了:)

I don't think you have framework conflicts here, just a complex page with nice gadgets to get lost in :)

这篇关于从jQuery到MooTools的addClass转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！