Question

所以我使用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＆＃34; .show＆＃34;定义并可能在那里定义一些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);

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

1 个答案: