JavaScript Add Class on Click of Element-CodePudding

I'm attempting to make a responsive navbar via a menu button and when said button is clicked a containing div appears with the navigation links. In order to do so when this element is clicked, I want the element to have the class 'toggled' added to it.

Here is my html:

        <div >
            <i ></i>
        </div>

Here's the JavaScript:

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

Could someone please help me out and let me know how to do this?!

CodePudding user response：

You need to update the selector as .fas.fa-bars because .fas and .fa-bar are two different classes.

$('.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 >
   <i >Click me</i>
</div>

CodePudding user response：

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

You should add dot . before class name in jQuery syntax. Without . it will be element selector, not class selector.

Check this w3schools article jQuery selectors