Question

我正在尝试创建一个切换功能，当用户单击一个按钮时，它会添加一个类属性，使箭头指向下方。如下图所示：

我的HTML：

<div class="container">
                <div class="row">
                    <div class="col-md-3">
                        <div class="slide1 tab">
                            <h2 class="button">Is a bonus work taking?</h2>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="slide2 tab">
                            <h2 class="button">How does it work?</h2>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="slide3 tab">
                            <h2 class="button">Chances of redeeming bonus </h2>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="slide4 tab">
                            <h2 class="button">Required documents</h2>
                        </div>
                    </div>
</div>
</div>

我的CSS：

.button {
    background: url(https://preview.c9users.io/jafar70/harry/img/arrowhead-pointing-to-the-right.png) no-repeat right center #DC7228;
    background-position: 98% 50%; 
    margin-right: 200px !important;
    color: #FFFFFF;
    display: block;
    margin: 10px 0 0 !important;
    padding: 1em 1em;
    font-weight: 700;
    font-size: 13px;
    border-radius: 10px;
}
.open-button {
    background: url(https://preview.c9users.io/jafar70/harry/img/caret-down.png) no-repeat right center #DC7228 !important;
    background-position: 98% 50%; 
    margin-right: 200px !important;
    color: #FFFFFF;
    display: block;
    margin: 10px 0 0 !important;
    padding: 1em 1em;
    font-weight: 700;
    font-size: 13px;
    border-radius: 10px;
}

我的jQuery：

$('.tab > .button').click(function() {
        $(this).removeClass('.button').addClass('.open-button');
    });

codepen是https://codepen.io/mrsalami/pen/VdZBgE

Answer 1

首先，以任何方式添加/删除/更改类的所有jQuery函数都不需要.前缀，因此：

$(this).removeClass('.button').addClass('.open-button');

应该是：

$(this).removeClass('button').addClass('open-button');

然后，为了让它在每次点击时添加然后移除，您将会想要使用toggleClass()代替：

$(this).toggleClass('button').toggleClass('open-button');

或者通过以下方式进行一次通话：

$(this).toggleClass('button open-button');

Here's a fork of your codepen that is working with that line edited

Answer 2

首先，你需要远离jQuery类方法中的点，因此addClass（“。button”）应该是addclass（“button”）。一开始似乎令人困惑，但这是它的工作方式。

为了减少冗余，以及更多DRY，请执行以下操作：

$(this).toggleClass('open-button');

这样你的.open-button的CSS样式只需要改变克拉，而不是重复.button类的整个样式。

Source

如何使用jQuery覆盖类

2 个答案: