我怎么能用javascript编写这个简短的函数？

Posted 2021-05-05

所以我使用jquery编写了这段代码，这对我来说是一种熟悉的语言。但是，我无法成功将其转换为javascript，而不是使用jquery。任何帮助将非常感激！

// Toggle Function
$('.toggle').click(function(){
  // Switches the Icon
  $(this).children('i').toggleClass('fa-pencil');
  // Switches the forms  
  $('.form').animate({
    height: "toggle",
    'padding-top': 'toggle',
    'padding-bottom': 'toggle',
    opacity: "toggle"
  }, "slow");
});

此代码切换了我的登录页面的图标和表单。

任何提示都会非常有用，谢谢你的一切！

答案

这是对原生JavaScript的粗略转换。您需要提供CSS“.show”定义，并可能在那里定义一些CSS动画以获得您想要的任何动画。

const toggleElement = document.querySelector('.toggle');

toggleElement.addEventListener('click', function() {
    const icons = this.querySelectorAll('i');
    icons.forEach(iconElement => iconElement.classList.toggle('fa-pencil'));

    const form = document.querySelector('.form');
    form.classList.toggle('show');
}, false);