Mootools中与jQuery toggle()相当的函数是什么？

Question

我希望使用Mootools来快速完成一项任务，即在单击时切换一些文字。但我似乎找不到Mootools中与jQuery的toggle()函数等效的函数。

我的目标如下：

$('a#id').toggle(
 function() {
  $(this).set('html', 'new text');
 },
 function() {
  $(this).set('html', 'old text');
 }
);

如何修改以上代码以适用于mootools？

谢谢！

- Probocop

Answer 1

据我所知，MooTools中并不存在“toggle”功能。您可以通过以下方式“实现”它，例如：http://www.jsfiddle.net/steweb/rdvx8/。这符合您的要求吗？（保留HTML标签） 编辑（针对MooTools开发人员:D），这可能是创建通用“toggle”的一种方法。

Element.implement({
    toggle: function(fn1,fn2){
        this.store('toggled',false);
        return this.addEvent('click',function(event){
            event.stop();
             if(this.retrieve('toggled')){
                 fn1.call(this);
             }else{
                 fn2.call(this);
             }
            this.store('toggled',!(this.retrieve('toggled')));
        });
    }
});

//using it in a 'jQuery' mode

$('mya').toggle(
   function() {
      this.set('html', 'new text');
   },
   function() {
      this.set('html', 'old text');
   }
);

在这里试验: http://www.jsfiddle.net/steweb/qBZ47/

编辑2 查看改进版本 http://jsfiddle.net/dimitar/UZRx5/ (感谢 @Dimitar Christoff)

- stecb

---

@Probocop 不用谢！顺便看一下更新后的答案，可以看到一个“通用”切换扩展程序 ;) - stecb

+1 - 确保从元素原型中return this，这样就不会破坏链接 :) 另一个改进是使用第二种方法将点击回调保存在元素存储或闭包中，以便可以通过精确匹配 "click", element.retrieve("toggler"); 来删除它 - 除非您不打算停止切换。 :) - Dimitar Christoff

@Dimitar Christoff：我已经设置了返回值（正如您所看到的，我的更新版本比您的评论旧:D），但我无法更新JSFiddle。我点击了更新->然后->设置为基本版。但基本版本仍然保持不变...顺便说一句..:D谢谢您的建议:)。只是一个问题：存储那个单击回调函数是否可以改进'mootoggle'，以防我想停止切换？ - stecb

说实话，我会使用闭包而不是公共元素存储（请参见我的回复）-访问变量比元素原型“检索”更快，因为后者需要查找更多的对象和对象属性来获取数据（即使如此，元素存储也很快）。 - Dimitar Christoff

哦，你可以做一件事来改进它 - 我不会停止事件（这应该在回调函数下游发生） - 相反，将事件作为参数传递给回调函数。然后它就会完美无缺了。 - Dimitar Christoff

抱歉，我又修改了一下 - http://www.jsfiddle.net/dimitar/qBZ47/5/ - 现在它通过arguments支持无限的函数。虽然你可能不会用到它，但是谁知道呢...能够做到总比不能做好 :) - Dimitar Christoff

Answer 2

我知道你已经接受了其他答案，但是MooTools 1.3现在提供了一个非常好的新功能，即Element Pseudos，我认为这将是一个不错的解决方案。首先，下面是代码：

http://www.jsfiddle.net/dimitar/VR9k8/4/

(function() {
    var toggled = 0;
    Event.definePseudo('toggle', function(split, funcsArray, args){
         if (funcsArray.length && funcsArray[toggled])
             funcsArray[toggled].apply(this, args); // args[0] is the Event instance

         toggled++;
         if (toggled >= funcsArray.length)
             toggled = 0;
     });
})();

document.id("foo").addEvent("click:toggle", [function(e) {
    e.stop();
    alert("function 1");
}, function(e) {
    e.stop();
    alert("function 2");
}, function(e) {
    e.stop();
    // event object (args[0])
    console.dir(e);
    alert("function 3");
}]);

这将允许您将nn个函数串联起来连续运行，并传递参数或至少原始事件。

文档: http://mootools.net/docs/more/Element/Element.Event.Pseudos

元素原型解决方案的等效或改进版本在这里。

- Dimitar Christoff

---

非常非常好的Dimitar :) 我没有考虑过伪代码..顺便说一下，我认为我的解决方案对于这个特定情况可能更加“兼容”.. +1 显然 ;) ..只是一个好奇：你是核心/更多团队的一员吗？ - stecb

是的，你的解决方案提供了他们熟悉的语法，并且不需要 mootools 1.3 或 mootools-more，所以这非常正确。我只是提供了我的另一种观点，它略微更有趣（因为它仍然是新的！）。唯一在这里潜伏的核心团队成员是 Arian，不幸的是，我只是一个跟随他们的 IRC、本地聚会和黑客马拉松的粉丝。:) 除了报告错误/示例修复和尝试制作一些 1.3 的演示（我还没有在 github 上推送），我几乎没有什么贡献。再加上博客，就是这样。任何帮助都是好的，对吧？ :) - Dimitar Christoff