addClass从jQuery转换为MooTools
我有使用MooTools 1.4的Joomla的Kunena论坛模板。 我集成了这个主题引导工具提示function,并添加了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我找不到很大的差异,但显然有些问题我无法理解。
任何帮助或指向其他地方非常感谢。
不确定你与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希望将它包含在工具提示中。 这让我想到了下一个问题:这就是你想要的吗?
如果你想要的是在所有这些元素中有一个工具提示,那么你需要在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});
这似乎是在索引页面的头部。
我不认为你在这里有框架冲突,只是一个复杂的页面,有漂亮的小工具迷路:)