Question

我在代码中遇到了令人困惑的问题。事情就是这样。

$(".main-menu").click(function(e) {
        e.preventDefault();

        $('nav').toggleClass("light-mode");

});

基本上我想添加点击功能： 1.检查导航是否已经类“轻模式”，如果没有，添加一个。 2.用户第二次点击“.main-menu”触发器后，我想删除添加的类“light-mode”，所以我想更多地推进toggleClass。

编辑：谢谢你的努力。我仍然没有完全解决我想要做的事情。我的英语说得不够清楚。我有一个“汉堡包”菜单，这是一个单击功能 - 触发显示重叠菜单，并隐藏它。但是当我点击它时，我还必须在我的导航中添加一个类“light-mode”，然后在第二次点击切换器之后我必须删除这个类，无论如何。而困难的是我不知道如何使用这个.click功能来做到这一点。

toggleClass运行良好，但如果我在特定页面部分的导航已经将此类设置为“light-mode”，则toggleClass会将其返回。因此，当叠加菜单显示我的导航时，没有添加该类。这就是为什么我不能只使用切换器。你的例子很好，但是在第二次点击时他们没有删除课程。

Answer 1

您需要.hasClass()，.addClass()和.removeClass()。

然后：

$(".main-menu").click(function(e) {
  e.preventDefault();
  if ($('nav').hasClass("light-mode")) {
    $('nav').removeClass("light-mode");
  } else {
    $('nav').addClass("light-mode");
  }
});

工作DEMO。

＆＃13;

$(".btn").click(function(e) {
  e.preventDefault();
  if ($('.example').hasClass("red")) {
    $('.example').removeClass("red");
  } else {
    $('.example').addClass("red");
  }
});

＆＃13;

.example {
  width:200px;
  height:200px;
  background-color:blue;
}

.red {
  background-color:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="btn">
Button
</button>

<div class="example"></div>

＆＃13;

如果您想多次使用它，您还可以构建一个小插件（tutorial）来轻松完成此操作：

(function( $ ){
   $.fn.classToggler = function(classToCheck, classToAddOrRemove) {
    if ($(this).hasClass(classToCheck)) {
      $(this).removeClass(classToAddOrRemove);
  } else {
      $(this).addClass(classToAddOrRemove);
  }
   }; 
})( jQuery );

和

$(".btn").click(function(e) {
  e.preventDefault();
  $('.example').classToggler("red", "red");
});

更新了DEMO。

＆＃13;

(function( $ ){
   $.fn.classToggler = function(classToCheck, classToAddOrRemove) {
      if ($(this).hasClass(classToAddOrRemove)) {
    $(this).removeClass(classToAddOrRemove);
  } else {
    $(this).addClass(classToAddOrRemove);
  }
   }; 
})( jQuery );

$(".btn").click(function(e) {
  e.preventDefault();
  $('.example').classToggler("red", "red");
});

＆＃13;

.example {
  width:200px;
  height:200px;
  background-color:blue;
}

.red {
  background-color:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="btn">
Button
</button>

<div class="example"></div>

＆＃13;

P.S。因为你正在努力建立一个＆＃34; togler＆＃34;您必须使用.hasClass()，因为在同一个.click（）函数中需要.addClass()和.removeClass()，并且它们会在没有if语句的情况下相互删除。

Answer 2

我相信如果不存在，这就是你要添加的课程。

更新：无需致电hasClass。

       $('nav').addClass("light-mode");

第二，你可以打电话给removeClass，无论你想要删除它......即使它不存在，也没关系。

$('nav').removeClass("light-mode");

Answer 3

如果您想制作自己的切换类，那么您可以轻松地使用三元运算符。

$("nav").hasClass("light-mode") ? $("nav").removeClass("light-mode"):$("nav").addClass("light-mode");

点击事件功能。

修改

由于您需要在第二个类上首次单击时添加类，因此需要删除Class。所以你需要使用计数器变量;

var clickcount = 0; $(".main-menu").click(function(e) { if(clickcount === 0) { $("nav").addClass("light-mode"); clickcount++; } else { $("nav").removeClass("light-mode"); clickcount = 0; } });

如果没有添加，请检查导航是否已经上课

3 个答案: