1

我有使用 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 进行比较,我找不到很大的差异,但显然有些地方是错误的,我无法理解。

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

4

1 回答 1

1

不确定您是否与 jQuery 发生冲突,但您可以使用 Mootools .getElements()代替,$$并且您不需要this像在 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').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});似乎位于索引页面的头部。

我不认为你在这里有框架冲突,只是一个复杂的页面,其中包含一些不错的小工具:)

于 2013-08-31T21:34:23.420 回答