javascript - 我怎么能用javascript写这个短函数？

Question

所以我使用 jquery 编写了这段代码，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");
});

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

任何提示都会非常有帮助，感谢您所做的一切!

Answer 1

这是对原生 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);