Увеличение левого поля в MooTools

Question

Я хочу увеличить левое поле на -190px с каждым кликом максимум в 6 раз.В настоящее время у меня есть

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

Но это срабатывает только один раз.Мне нужно запускать каждый клик (jQuery будет использовать что-то вроде ++), а затем только максимум 6 раз (я предполагаю, что это также будет использовать что-то вроде <6).1006 *

Answer 1

Это один из способов сделать это.В основном создайте глобальный счетчик переменных и увеличивайте его каждый раз на 1. При щелчке даже в основном проверяйте, меньше ли щелчков мышью 6, захватывает ли все кнопки и выполняет ли каждый цикл для них, а затем настраивает их по отдельности.Хитрость заключается в том, чтобы получить маржинальный стиль текущего элемента el и затем преобразовать его в 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>

Answer 2

Это действительно забавная вещь!Если вы можете использовать MooTools More, есть возможность определять псевдо-события.События, которые «что-то делают» с собой после выполнения.Поэтому вместо myEl.addEvent('click', fn) вы бы использовали myEl.addEvent('click:once', fn).В MooTools определено :once, оно запускается один раз, затем отключается, что означает, что после второго щелчка по myEl ничего не произойдет (EventListener отключен).1007 * псевдо-событие, ничего страшного, но оно ясно показывает, как использовать эти так называемые псевдо-события.Вот ссылка на него .

Может быть, это может помочь вам или кому-то еще.

Приветствия и удачное кодирование!