Почему не работает jquery код? При клике ничего не происходит

Question

$(document).ready(function () {
    $('.header__text-form').on('click', function () {
        $('.header__text-form').removeClass('.header__text-form--active');
 
    });
})

.header {

    &__text-form {
        background: #ffffff;
        box-shadow: 0px 17px 42px rgba(0, 0, 0, 0.12);
        border-radius: 29px;
        height: 58px;
        &--active {
            box-shadow: 0px 17px 42px rgba(247, 132, 52, 0.27);
        }
    }
}

<body>
<nav class="nav">
    <div class="container">
        <div class="nav__row">
            <div class="nav__logo">
                <img src="./img/cutspace-icon.svg" alt="logo">
                <span>CutSpace</span>
            </div>
            <div class="nav__list">
                <ul>
                    <li><a href="#" class="active">Home</a></li>
                    <li><a href="#">About us</a></li>
                    <li><a href="#">Find space</a></li>
                    <li><a href="#">Share space</a></li>
                    <li><a href="#">Promote space</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>

<header class="header">
    <div class="container">
        <div class="header__row">
            <div class="header__text">
                <h1 class="header__text-title">
                    Find your custom matched commercial real estate space.
                </h1>
                <p class="header__text-content">
                    In oculis quidem exercitus quid ex ea consequatur? autem vel eum fugiat, quo pertineant ero tibique
                </p>
                <form action="" class="header__text-form header__text-form--active">
                    <label class="text-form__label">
                        <input type="text" class="text-form__input" placeholder="Your email address">
                        <button class="text-form__button button">
                            Subscribe
                        </button>
                    </label>
                </form>
            </div>
            <div class="header__img">
                <img src="./img/header-image.jpg" alt="real estate space">
            </div>
        </div>
    </div>
</header>
<script src="libs/jquery/jquery-3.6.0.min.js"></script>
<script src="js/main.js"></script>
</body>

Answer 1

Потому что при клике вы сначала удаляете класс, а затем сразу добавляете. Для этого есть toggleClass. Ко всему у вас стоит точка при добавлении и удалении, она там не нужна.

БЛОГ НА HUSL

Почему не работает jquery код? При клике ничего не происходит

Ответы (1 шт):