рефакторинг следующего кода для использования jQuery

У меня есть код, который добавляет прослушиватели событий, которые не были написаны с помощью jQuery.рефакторинг следующего кода для использования jQuery

pic1.addEventListener("webkitTransitionEnd", 
    function(){ 
     pic1.className="down"; 
     pic1.style.zIndex=picclick; 
     },true); 
pic1.addEventListener("oTransitionEnd", 
    function(){ 
     pic1.className="down"; 
     pic1.style.zIndex=picclick; 
     },true); 
pic1.addEventListener("transitionEnd", 
    function(){ 
     pic1.className="down"; 
     pic1.style.zIndex=picclick; 
     },true);

Я хочу добавить eventListeners с jQuery и поддерживать ту же функциональность. Идеи о том, как это должно выглядеть?

Вот эскиз того, что я делаю ... http://jsdo.it/dbwest/4rqo

источник

2013-06-03 David West

Я не пытаюсь быть элегантными, но то, что вы пытались сделать до сих пор (т.е. в Jquery?). Кроме того, что вы подразумеваете под «прослушивателями событий, которые не были написаны без jQuery», вы можете использовать обработчики jQuery '' bind'' или '' on'' для этого. См. [This] (http://stackoverflow.com/a/11284204/1048479) Сообщение SO –

Почему вы повторяете один и тот же код 3 раза? – Evgeny

Здесь вы найдете: http://learn.jquery.com/events/event-basics/. –

слушатели событий могут быть заменены в JQuery с .on или .bind заявлением:

var pic1 = $('yourElementOrClass'); 

pic1.on('transitionend webkitTransitionEnd oTransitionEnd', function(){ 
    $(this).addClass('down').css('z-index', picclick); 
});

источник

2013-06-03 19:13:16 Kosmetika

Вы должны быть в состоянии связать все 3 события в одной команде, как показано ниже. Я также включил эквиваленты jQuery для установки класса и zindex.

$(pic1).bind('transitionend webkitTransitionEnd oTransitionEnd', function(){ 
    $(this).attr('class','down').css('z-index', picclick); 
});

или

$(pic1).on('transitionend webkitTransitionEnd oTransitionEnd', function(){ 
    $(this).attr('class','down').css('z-index', picclick); 
});

источник

2013-06-03 19:10:05 nderscore

' '.attr ('class')' 'является плохой практикой – Kosmetika

см.' addClass'. – Stefan

@ Kosmetika: Никогда не слышал, что это плохая практика. быстрый способ «сбросить» классы до значения без проверки того, существует ли класс или нет. –

Я не уверен, что вы сделали достаточно исследований по этому вопросу, но я дам вам преимущество сомнения. jQuery имеет .on, что является рекомендуемым способом связывания событий. Также он имеет ярлык для именно этой ситуации:

$(pic1).on("webkitTransitionEnd oTransitionEnd transitionEnd", 
function(){ 
    pic1.className="down"; 
    pic1.style.zIndex=picclick; 
});

Имея все события в одном, как это означает, что вы можете избежать дублирования кода.

источник

2013-06-03 19:11:29 Dave

рефакторинг следующего кода для использования jQuery

ответ

Смежные вопросы