同样的事情onclick并单击元素外部

Question

我的页面上有3个具有相同类别的元素，当您点击哪个元素时，它应该更改某些图像的不透明度，向前和向后移动动画并隐藏其他2个元素等。当您点击它们之外时它应该是做同样的事情。

到目前为止我得到的是，它工作正常但我不知道当你再次点击相同的类元素时它是如何工作的，但是当你点击外面它时工作正常。

$(document).ready(function(){
      var tipClick = $('.tip');
      var dId  = $(tipClick).attr('data-id');
      var activeTip = $('.tip.active').attr('data-id');
      $(tipClick).on('click', function(e){
          $("#homepage .homepage-cnt.l .main.img .m").toggleClass("op").fadeTo( 0, 0.2 );
          $(".main.img").toggleClass(dId);
          $(this).toggleClass('active');
          $(".clone .n").show();
          $(".tip i svg").css({
              '-webkit-animation' : 'spin .3s forwards',
                 '-moz-animation' : 'spin .3s forwards',  
                  'animation'     : 'spin .3s forwards'
          });
          e.preventDefault();
        }); 
      $(document).click(function(){
          $("#homepage .homepage-cnt.l .main.img .m").removeClass('op').fadeTo( 1000, 1 );
          $(".clone .n").hide();
          $(".clone").removeClass("art-t-r");
          $(".clone").removeClass("art-m-l");
          $(".clone").removeClass("art-b-l");
          $(".tip.t-r").fadeIn(500);
          $(".tip.m-l").fadeIn(500);
          $(".tip.b-l").fadeIn(500);
          $(".art").fadeOut(100);
          $(".tip i svg").css({
              '-webkit-animation' : 'spinback .3s backwards',
                 '-moz-animation' : 'spinback .3s backwards',  
                  'animation'     : 'spinback .3s backwards'
          });
      });
  });

我完全坚持在那里，任何帮助都会受到赞赏。