使用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> 

Answer 2

在您的代码中，没有什么地方可以删除/切换开放类。 您需要同时切换两者。

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