addClass converting from jQuery to 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');

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

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);

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'); }
}); 

and no effect again.

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.

回答1:

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');}
});

EDIT: 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?

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');

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 :)

来源：https://stackoverflow.com/questions/18552790/addclass-converting-from-jquery-to-mootools