Question

我创建了下面的代码，它在第一次点击时通过类旋转成功旋转了箭头。

但是在第二次点击时，我希望箭头再次旋转。我尝试过，使用else，并在点击时删除类。但这没效果。任何建议或帮助都会很棒！

 $(document).ready(function(){
        $('#first').click(function(event) {
          $(".content.firstArrow").addClass("rotate");
        }); 
        $('#second').click(function(event) {
          $(".content.secondArrow").addClass("rotate");
        }); 
        $('#third').click(function(event) {
          $(".content.thirdArrow").addClass("rotate");
        }); 
        $('#forth').click(function(event) {
          $(".content.forthArrow").addClass("rotate");
        });       
   });

Answer 1

尝试使用.toggleClass()

$(".content.firstArrow").toggleClass("rotate");

Answer 2

您可以优化代码并仅保留一个处理程序：

$(document).ready(function(){
    $('#first, #second, #third, #forth').click(function(event) {
      $(".content." + $(this).attr('id') + "Arrow").toggleClass("rotate");
    }); 
});

Answer 3

$('#first :not(.rotate)').click(function(event) {
  $(".content.firstArrow").addClass("rotate");
}); 

$('#first .rotate').click(function(event) {
  $(".content.firstArrow").removeClass("rotate");
});

Answer 4

使用.toggleClass（）而不是addClass（）或removeClass（）

jQuery将删除类onclick添加到div

4 个答案: