javascript - 增加 MooTools 中的左边距

Question

我想每次点击最多 6 次，将左边距增加 -190 像素。我目前有

$$('#goright').addEvent('click', function(){
     $$('#buttons').tween('marginLeft', -190);
})

但这只会触发一次。我需要在每次点击时运行(jQuery 会使用类似++ 的东西)，然后最多只运行 6 次(我假设这也会使用类似 < 6 的东西)。

有什么帮助吗？？？

Answer 1

这是一种方法。基本上创建一个全局变量计数并每次将其递增 1。单击时甚至基本上检查单击是否小于 6，是否捕获所有按钮并对它们执行每个循环，然后单独补间。诀窍是获取当前 el 的 margin-left 样式，然后将其转换为 int 以便删除 px 然后添加或减去取决于您想要元素的 margin-left 去。这是 JSFIDDLE实际演示它，但我没有使用 -190，而是使用了 +10，这样您就可以看到效果。请让我知道这是否是您要找的。顺便说一句，这是使用完全兼容的 Mootools 核心 1.3:

var count = 0;

$('goright').addEvent('click', function(){
    if(count < 6){
         $$('.btn').each(function(el){
             el.tween('margin-left', el.getStyle('margin-left').toInt()-190);
         });
    }
    count++;
});

我使用的 HTML:

<button class='btn'>1</button>
<button class='btn'>2</button>
<button class='btn'>3</button>
<button class='btn'>4</button>

<div id='goright'>Click To Go Right</div>