jQuery代碼需要翻譯成香草，所以我可以在Angular中使用

我在模板上有這個代碼，我將代碼傳遞給Angular 4，但它不喜歡jQuery上的$，所以我需要一種方法來能夠在Angular 4上使用它，或者將它轉換爲純js，以便我可以使用它。jQuery代碼需要翻譯成香草，所以我可以在Angular中使用

下面的代碼：

$('#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'); 
     } 
     });

我怎樣才能做到這一點？

來源

2017-08-16 max2020

如何做相同的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);

來源

2017-08-16 20:32:19

沒有加入jQuery的包：

聲明變量$：任何;

，如果你需要打字稿定義那麼這個包添加到您的package.json

「@類型/ jQuery的」：「^ 2.0.45」，

來源

2017-08-16 19:43:55 Jim

jQuery代碼需要翻譯成香草，所以我可以在Angular中使用

回答

相關問題