Почему не работает скрипт на JQuery?

Question

[Ulker Programmer]

мне нужно так изменить класс, чтобы иконка bars (бургер) менялась на times (крестик)

вот мой html код:

<header class="header">
        <a href="#" class="logo"><i class="fas fa-magic"></i> &nbsp; design.</a>

        <a href="#" class="fas fa-bars"></a>
        <!-- <a href="" class="fa bars"></a> -->

        <nav class="navbar">
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#team">Team</a></li>
                <li><a href="#contact">Contact</a></li>
                <li><a href="#faq">FAQ</a></li>
            </ul>
        </nav>
    </header>

sass:

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

// :root{
//     --color: #6c5CE7;
// }
$color: #6c5CE7;

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    text-transform: capitalize;
    transition: all .2s linear;
    text-decoration: none;
}

body {
    overflow-x: hidden;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    // align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 100vh;
    padding: 1rem 2rem;

    & .navbar {

        // display: flex;
        // align-items: center;
        & ul {
            list-style-type: none;
            display: flex;
            align-items: center;
            justify-content: space-around;

            & li {
                margin: 0 1.5rem;

                & a {
                    font-size: 1em;
                    color: #fff;

                    &:hover {
                        color: #ccc;
                        transition: 0.5s;
                    }
                }
            }
        }
    }

    & .logo {
        font-size: 1.5em;
        color: #fff;

        // -webkit-text-stroke-width: 1px;
        // -webkit-text-stroke-color: #000;
        & i {
            padding: 0 1em;
            // margin: 0 20px;
        }
    }

    & .fa-bars {
        color: #fff;
        cursor: pointer;
        font-size: 3rem;
        display: none;
    }
}

.home {
    min-height: 100vh;
    width: 100%;
    // background: linear-gradient(purple, $color);
    background: linear-gradient(0deg, rgb(81, 37, 224) 35%, rgb(170, 123, 250) 100%);
}




@media(max-width: 800px) {
    html {
        // font-size: 50%;
    }

    .header {
        & .fa-bars {
            display: block;
        }
        & .fa-times{
            transform: rotate(100deg);
        }
        & .navbar{
            position: fixed;
            top: -120%;
            left: 0;
            height: auto;
            width: 100%;
            background-color: #fff;
            z-index: 10000;
            border-top: .1rem solid rgba(0,0,0,.3);
            & ul{
                height: 100%;
                width: 100%;
                flex-flow: column;
                & li{
                    margin: 1rem 0;
                    & a{
                        color: #444;
                        font-size: 2.4em;
                    }
                }
            }
        }
    }
}

и...jquery:

$(document).ready(function () {
        $('.fa-bars').click(function () {
            $(this).toggleClass('fa-times');
        });
    });

не подскажете, что не так?

Comments

[Василий Банников]

Вы догадались завернуть код в цитату, но не догадались завернуть его в <code>...

[Артем Спиридонов]

$(document).ready(function () 
{
    $('.fa-bars, .fa-times').click(function () 
    {
         $(this).toggleClass('fa-times').toggleClass('fa-bars');
    });
});

Answer 1

[Артем Спиридонов]

$(document).ready(function () 
{
    $('.fa-bars, .fa-times').click(function () 
    {
         $(this).toggleClass('fa-times').toggleClass('fa-bars');
    });
});

Comments

[Артем Спиридонов]

Тут есть кнопка "Отметить решением"

Answer 2

[Raline]

Или просто через пробел

$(document).ready(function () {
    $('.fa-bars').click(function () {
      $(this).toggleClass('fa-bars fa-times');
    });
});

Comments

[Артем Спиридонов]

А обратно? Когда класса fa-bars не будет после последнего переключения?