javascript - 使用 Jquery 切换时完全替换类

Question

我使用下面的代码在单击按钮时切换 2 个类。

<button class="filter-btn-open">Open</button>

$(document).ready(function () {
    $('.filter-btn-open').click(function () {
        $(this).toggleClass("filter-btn-close" );
    });
});

我面临的问题是 filter-btn-open类没有完全删除。 filter-btn-close在切换按钮时添加和删除，但 filter-btn-open始终保留。如何在切换时将其完全移除和替换？

更多说明

点击后，我得到这个 - <button class="filter-btn-open filter-btn-close">Open</button>再次单击时，它返回到 <button class="filter-btn-open">Open</button>并继续这样。如您所见，filter-btn-open类总是在那里。点击时，我要<button class="filter-btn-open">Open</button>成为<button class="filter-btn-close">Open</button>

Answer 1

1. 应该添加要切换的类

$(document).ready(function () {
    $('.filter-btn-open').click(function () {
        $(this).toggleClass("filter-btn-close filter-btn-open" );
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="filter-btn-open">Open</button>