JavaScript 添加 Class 點擊元素

Question

我正在嘗試通過菜單按鈕制作響應式導航欄，當單擊所述按鈕時，導航鏈接會出現包含 div。 為了在單擊此元素時執行此操作，我希望該元素添加 class 'toggled'。

這是我的 html：

        <div class="menu-container">
            <i class="fas fa-bars"></i>
        </div>

這是 JavaScript：

$('fas.fa-bars').on('click', function() {
  $(this).addClass("toggled");
});

有人可以幫助我，讓我知道該怎么做嗎？！

Answer 1

您需要將選擇器更新為.fas.fa-bars因為.fas和.fa-bar是兩個不同的類。

 $('.fas.fa-bars').on('click', function() { $(this).addClass("toggled"); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="menu-container"> <i class="fas fa-bars">Click me</i> </div>

Answer 2

$('.fas.fa-bars').on('click', function() {
  $(this).addClass("toggled");
});

你應該添加點. 在 jQuery 語法中的 class 名稱之前。 沒有. 它將是元素選擇器，而不是 class 選擇器。

檢查這篇 w3schools 文章jQuery 選擇器

Answer 3

正如@Sebastian Simon所說，您的選擇器代碼是錯誤的。 fas.fa-bars將匹配<fas class="fa-bars"> 。 你需要這樣的東西： .fas.fa-bars 。 請參閱下面的演示。

 $('.fas.fa-bars').on('click', function () { $(this).addClass("toggled"); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> <div class="menu-container"> <i class="fas fa-bars"></i> </div>