mootools切换按钮问题

发布于 2024-12-06 01:58:25 字数 1265 浏览 0 评论 0原文

我正在尝试编写一个函数，让我根据类别切换列表中的所有缩略图。例如，如果我单击菜单栏上的“打印”，我需要隐藏“打印”类的所有拇指。如果我第二次单击它，隐藏的拇指就会出现。

这是我想到的：

window.addEvent('domready', function(){
       $$('.menu_button').toggle(
        function() {
            this.fade(0.5);
            var buttonId = this.id;
            $('slider_list').getElements('.'+buttonId).each(function(li) {
                li.tween('width','0');
            });
        },
        function() {
            this.fade(1);
            var buttonId = this.id;
            $('slider_list').getElements('.'+buttonId).each(function(li) {
                li.tween('width','100');
            });
        }
    );  

});



//toggle (emulate JQuery's toggle)
(function() {
    var toggled = 0;
    Element.implement({
        toggle: function(fn1, fn2) {
            var fns = [fn1, fn2];
            return this.addEvent('click', function(){
                fns[toggled].apply(this, arguments);
                toggled = toggled == 0 ? 1 : 0;
            });
        }
    });
})();

我在这里找到了切换函数

现在我遇到一些问题。首先，无论我做什么，列表末尾总会留下一个拇指。然后单击菜单将不会执行任何操作。一般来说，当我单击与前一个状态（隐藏/显示）不同的按钮时，总会出现空单击...

有人吗？

原文

I'm trying to code a function that let me toggle in and out all thumbnails in a list depending on their classes.
e.g., if I click "print" on my menu bar, I need all thumbs with the "print" class to be hidden. If I click it a second time, the hidden thumbs are showing up.

Here is what I came up with :

window.addEvent('domready', function(){
       $('.menu_button').toggle(
        function() {
            this.fade(0.5);
            var buttonId = this.id;
            $('slider_list').getElements('.'+buttonId).each(function(li) {
                li.tween('width','0');
            });
        },
        function() {
            this.fade(1);
            var buttonId = this.id;
            $('slider_list').getElements('.'+buttonId).each(function(li) {
                li.tween('width','100');
            });
        }
    );  

});



//toggle (emulate JQuery's toggle)
(function() {
    var toggled = 0;
    Element.implement({
        toggle: function(fn1, fn2) {
            var fns = [fn1, fn2];
            return this.addEvent('click', function(){
                fns[toggled].apply(this, arguments);
                toggled = toggled == 0 ? 1 : 0;
            });
        }
    });
})();

I've found the toggle function here

Now I experience some issues.
First no matter what I do there will always be a thumb left at the end of the list.
Then some clicks on the menu won't do anything. Generally when I click on a button in a different state (hidden/shown) than the previous one, there will always be a null click...

Anybody ?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

讽刺将军 2024-12-13 01:58:25

我以允许多种功能的方式实现它，虽然完全不像 MooTools，但它会起作用。您使用的代码的问题是，每个使用切换的元素都

Element.implement({
    toggle: function() {
       this.store('toggle_options', {
         fn: arguments,
         cur: 0
       });
       this.addEvent('click', function(e) {
           e.stop();
           var opts = this.retrieve('toggle_options');
           console.log(opts.fn.length, opts.cur);
           opts.fn[opts.cur++].apply(this);
           if(opts.cur >= opts.fn.length) opts.cur = 0;
       }); 
    } 
});

$('button').toggle(
    function() {
      this.set('text', 'foo 1');  
    },
    function() {
      this.set('text', 'bar 2');
    }
);

在此处切换相同的 toggled 变量小提琴： http://jsfiddle.net/94FFj/

虽然我建议您实现代码如下：

  $('.menu_button').each(function(button) {
    button.store('toggle_active', 0);
    button.addEvent('click', function(e) {
      e.stop();
      var active = this.retrieve('toggle_active');
      var opts = [{opacity: 1, width: 0}, {opacity: 0.5, width: 100}];
      this.fade(opts[active].opacity);
      $('slider_list .' + this.get('id')).tween('width', opts[active].width);
      this.store('toggle_active', active ? 0 : 1);
    });
  })

I implemented it in a way that allows multiple functions, although not at all MooTools like, it will work. The problem with the code you are using is that each element which uses toggle is toggling the same toggled variable

Element.implement({
    toggle: function() {
       this.store('toggle_options', {
         fn: arguments,
         cur: 0
       });
       this.addEvent('click', function(e) {
           e.stop();
           var opts = this.retrieve('toggle_options');
           console.log(opts.fn.length, opts.cur);
           opts.fn[opts.cur++].apply(this);
           if(opts.cur >= opts.fn.length) opts.cur = 0;
       }); 
    } 
});

$('button').toggle(
    function() {
      this.set('text', 'foo 1');  
    },
    function() {
      this.set('text', 'bar 2');
    }
);

fiddle here: http://jsfiddle.net/94FFj/

Although I would recommend you implemented your code as this:

  $('.menu_button').each(function(button) {
    button.store('toggle_active', 0);
    button.addEvent('click', function(e) {
      e.stop();
      var active = this.retrieve('toggle_active');
      var opts = [{opacity: 1, width: 0}, {opacity: 0.5, width: 100}];
      this.fade(opts[active].opacity);
      $('slider_list .' + this.get('id')).tween('width', opts[active].width);
      this.store('toggle_active', active ? 0 : 1);
    });
  })

回复收藏 0 原文

~没有更多了~