Question

我在模板上有这个代码，我将代码转移到Angular 4但它不喜欢$ on jquery所以我需要一种方法来能够在Angular 4上使用它或者只是将它转换为纯粹的js所以我可以使用它。

以下是代码：

$('#toggle-btn').on('click', function (e) {

        e.preventDefault();

        if ($(window).outerWidth() > 1194) {
          $('nav.side-navbar').toggleClass('shrink');
          $('.page').toggleClass('active');
        } else {
          $('nav.side-navbar').toggleClass('show-sm');
          $('.page').toggleClass('active-sm');
        }
      });

我该怎么做？

Answer 1

如何在vanillaJS中做同样的事。

function toggle(elements, className){
    Object.keys(elements).forEach(element => elements[element].classList.toggle(className))
}

function handleClick(e){
    e.preventDefault();
    if (window.outerWidth > 1194) {
        toggle(document.querySelectorAll('nav.side-navbar'), 'shrink');
        toggle(document.getElementsByClassName('page'), 'active');
    } else {
        toggle(document.querySelectorAll('nav.side-navbar'), 'show-sm');
        toggle(document.getElementsByClassName('page'), 'active-sm');
    }
}

document.getElementById('toggle-btn').addEventListener('click', handleClick);

Answer 2

不添加jQuery包：

声明var $：any;

如果您需要typescript定义，请将此包添加到package.json

“@ types / jquery”：“^ 2.0.45”，

jQuery代码需要转换为vanilla，以便我可以在Angular中使用

2 个答案: