jquery按钮加并在外部关闭动画并单击外部关闭动画问题

Question

我创建了一个函数，在该函数中，单击按钮时加号会变成关闭或乘法的符号。这工作正常，但是我想要的是在我单击加号按钮并在按钮关闭符号之外单击之后应该只转为加号。目前，它仅在按钮上起作用。下面是JSfiddle链接。任何帮助。谢谢。

Jsfiddle Link:-

https://codepen.io/lsultani/pen/JXqQza

Answer 1

您可以像这样将事件侦听器添加到body标签。

$("body").click(function(){
      if( $(".btn-round").hasClass("closeButton") ){
          $(".btn-round").removeClass("closeButton").addClass("plusButton");
      }
      if( $(".btn-square").hasClass("circleShape") ){
            $(".btn-square").removeClass("circleShape").addClass("squareShape");
        }
  });

如果单击主体上的任何位置，它都会检查特定元素是否为处于“ closeButton”状态。如果处于该状态，则此事件将状态更改为“ plusButton”。如果元素已经处于“ plusButton”状态，则不会发生任何事情。

此事件还影响animate_function（）。为了保留animate_function（）的现有功能，您应该添加

event.stopPropagation();

在animate_function（）中

因此整个js代码变为

        $(function() {
//do something

  $(".btn-round").click({animateIn: "closeButton", animateOut: "plusButton"}, animate_function);
  $(".btn-square").click({animateIn: "circleShape", animateOut: "squareShape"}, animate_function);
  $("body").click(function(){
      if( $(".btn-round").hasClass("closeButton") ){
          $(".btn-round").removeClass("closeButton").addClass("plusButton");
      }
      if( $(".btn-square").hasClass("circleShape") ){
            $(".btn-square").removeClass("circleShape").addClass("squareShape");
        }
  });


  function animate_function(event){
    event.stopPropagation();
      if( $(this).hasClass(event.data.animateIn) ) {
            $(this).removeClass(event.data.animateIn).addClass(event.data.animateOut);
           }
        else if( $(this).hasClass(event.data.animateOut) ) {
           $(this).removeClass(event.data.animateOut).addClass(event.data.animateIn);
        }
        else {
          $(this).addClass('animated ' + event.data.animateIn);
        }     
  }

//end do something     
});