2

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

但在第二次点击时，我希望箭头再次旋转回来。我已经尝试过，使用其他方法，并在点击时删除类。但这没有奏效。任何建议或帮助都会很棒！

 $(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");
        });       
   });
4

4 回答 4

5

尝试使用.toggleClass() 

$(".content.firstArrow").toggleClass("rotate");
于 2013-04-11T18:20:48.860 回答
1

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

$(document).ready(function(){
    $('#first, #second, #third, #forth').click(function(event) {
      $(".content." + $(this).attr('id') + "Arrow").toggleClass("rotate");
    }); 
});
于 2013-04-11T18:25:12.247 回答
0

使用 .toggleClass() 而不是 addClass() 或 removeClass()

于 2013-04-11T18:24:07.550 回答
0 
$('#first :not(.rotate)').click(function(event) {
  $(".content.firstArrow").addClass("rotate");
}); 

$('#first .rotate').click(function(event) {
  $(".content.firstArrow").removeClass("rotate");
});
于 2013-04-11T18:19:56.520 回答