Показать сообщение отдельно
  #1 (permalink)  
Старый 03.04.2016, 19:32
Интересующийся
Отправить личное сообщение для lakusha Посмотреть профиль Найти все сообщения от lakusha
 
Регистрация: 30.01.2016
Сообщений: 17

Как имитировать .one из jQuery на чистом JS
Есть вот такая функция:
$('.loginIcon').one('click', function(){
    $('.loginIcon').css({
        'width' : '100%',
        'height' : '100%',
        'left' : '0px',
        'margin-left' : '0px',
        'bottom' : '0px'
    });                                                            
    $('.buttonForSydorenko').css({
        'display' : 'block'
    }); 
    $('#inputLogin').css({
        'display' : 'block'
    }); 
    $('.wordLogin').css({
        'display' : 'block'
    }); 
    $('.buttonForLogin').css({
        'display' : 'block'
    }); 
    $('#inputLogin').delay(500).animate({height: '80px'},100);      
    $('.wordLogin').delay(500).animate({'margin-left': '-240px'})   
    $(this).css({
        'background' : 'rgb(73,38,105)',
        'padding-top' : '40px'
    });                                                             
});

Вот переписал внутренности на чистый JS:
loginIcon.addEventListener('click', function(){
    loginIcon.style.width = "100%";
    loginIcon.style.height = "100%";
    loginIcon.style.left = "0px";
    loginIcon.style.marginLeft = "0px";
    loginIcon.style.bottom = "0px";  
    loginIcon.style.background = "rgb(73,38,105)";                                                       

    buttonForSydorenko.style.display = "block";
    inputLogin.style.display = "block";
    wordLogin.style.display = "block";
    buttonForLogin.style.display = "block";
    setTimeout( function(){
    inputLogin.style.height = "80px";  
       },500);      
    wordLogin.classList.add("wordLoginAnim");   
    loginIcon.style.background = "rgb(73,38,105)";  
    loginIcon.style.paddingTop = "40px";
    alert('OPA');
});


Добавил во втором варианте алерт "Опа".
Цель: чтобы этот алерт вылетел только по первому клику, а следующие клики по этому элементу ничего не делали бы. В jQuery мне помог .one, тут не могу придумать, туплю.
Ответить с цитированием