Question

我正在尝试使用mootools来快速切换点击文本。但我似乎找不到Mootools相当于jQuery的toggle（）函数。

我要做的是如下：

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

我如何修改mootools的上述代码？

谢谢！

Answer 1

据我所知，mootools上的“切换”不存在。

您可以通过这种方式“实施”它，例如：http://www.jsfiddle.net/steweb/rdvx8/

这是你想要获得的吗？

编辑（对于mootools开发者：D），这可能是一种创建常规“切换”的方法：

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）

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");
}]);

...将允许您菊花链连接多个函数以连续循环运行以及传递参数或至少传递原始事件。

docs：http://mootools.net/docs/more/Element/Element.Event.Pseudos

元素原型解决方案的等效或改进版本为here

Mootools相当于jQuery toggle（）？

2 个答案: