Question

我有一个默认课程。单击图标后，默认类将被删除并替换为新图标，然后再次单击图标时，将再次添加旧类，然后将删除新类。每次单击图标时都应更改它。它已关闭.toggleClass（），但应显示/隐藏并替换该类。

这是我的js代码

var MenuIcon = $('.menu-icon-plus'),
    MenuSidebar = $('.sidebar');

  MenuIcon.click(function(){
    if ($(MenuSidebar).hasClass('test')) { //existing class
      $(MenuSidebar).removeClass('test');
    } else {
      $(MenuSidebar).addClass('test2'); // replacement of old class
    }

Answer 1

将这两个类添加到toggleClass("default special")以交换它们：

＆＃13;

$("button").on("click", function(){

  $(this).toggleClass("default special");
  
});

＆＃13;

.default{
  background:lime;
  font-size:2em;
}
.special{
  background:gold;
  /* I don't have font size */
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="default">TEST</button>

＆＃13;

P.S：如果你只想改变背景，那么toggleClass("special")就足够了或者，再次仅使用.toggleClass("special")，您可以直接在CSS中设置重置样式，但这只会使事情复杂化。这显然取决于用例。

Answer 2

试试这个。根据您的要求替换类。

$(document).on('click', '.oldclass', function() {   

            $(this).removeClass('oldclass').addClass('newclass'); 
    });

    $(document).on('click', '.newclass', function() { 

            $(this).removeClass('newclass').addClass('oldclass');
    });

添加类然后删除并在单击时替换类

2 个答案: