Vanilla Javascript - 向元素1添加類，並在單擊元素1時從元素2中刪除類

Question

有人告訴我，我不能再在我正在構建的項目中使用jQuery，所以我不得不使用vanilla Javascript，這有時可能會超出我的想象。 我希望簡單地將這個jQuery轉換為js。 我在Stack Overflow上搜索和搜索無濟於事，但我覺得它應該不那么困難。 任何幫助都會很棒！

$('.navbuttoncontainer a').on( 'click', function() {
$('.navbuttoncontainer .current').removeClass('current');
$(this).addClass('current');

Answer 1

您可以將click事件偵聽器附加到.navbuttoncontainer元素。

然后通過檢查目標元素的標記名稱（ e.target ）來確定是否單擊了a元素。 使用.add() / .remove()的方法classList屬性的元素，以添加/刪除類。

 document.querySelector('.navbuttoncontainer').addEventListener('click', function (e) { var target = e.target; if (target.tagName === 'A') { e.currentTarget.querySelector('.current').classList.remove('current'); target.classList.add('current'); } }); 

 .current { color: #f00; } 

 <div class="navbuttoncontainer"> <a class="current">Initially current item</a> <a>Second item</a> <a>Third item</a> </div> 

Answer 2

所有現代瀏覽器都支持document.querySelector / document.querySelectorAll ，它們與jQuery $函數基本相同。

（有關支持的瀏覽器信息，請查看http://caniuse.com/#feat=queryselector 。

DOM API不是在jQuery對象上調用addClass / removeClass ，而是公開名為className的元素的屬性。 這與元素上的class屬性相同：

this.className ='current';

最后，使用addEventListener函數注冊事件處理程序。 參數是事件名稱和事件處理函數。