为什么事件目标不会调用单个元素

Question

我使用event.target，但是当我使用toggleClass为选定元素做粗体时。当我点击其他元素时，它们都会发生变化。但我的mousedown事件并不仅仅对单一目标感兴趣？

  function tik(xs){
       $.each(['bold', 'italic', 'right', 'left', 'center'], function(index, elem) {

            var x = xs; // e.target or drag event for this variable becomes to ui.helper

              if($(x).is('.drag') || $(x).is('.drags') ){

                  if($(x).hasClass(elem))
                      $(`.fa-${elem}`).addClass('selected');
                  else
                      $(`.fa-${elem}`).removeClass('selected');


                  if(index <= 1 ) { // bold and italic is 0-1 , left,r... 2-3-4

                      $(`.fa-${elem}`).click(function() {

                          $(x).toggleClass(`${elem}`);
                          $(`.fa-${elem}`).toggleClass('selected');


                      });
                  } else {
                      $(`.fa-align-${elem}`).click(function() {
                          $(x).toggleClass(`${elem}`);
                          $(`.fa-align-${elem}`).toggleClass('selected');

                      });
                  }
              }
              // $(x).addClass('parlak') // kontrol gelmeli
       });
  }

我如何找到导致这个问题的原因？我尝试了很多，但我没有找到。 如果连接与拖动事件，良好的工作但这次不是实时的，需要拖动看到

I captured a video for show you

我知道这里的代码都像sphagetti一样糟糕。但我可以做到这一点。我尝试了很多东西。当我工作时，更多的事情发生了变化

这里有一个简化状态

$(document).mousedown(function(e,i) {
   // tik(e)

  var lastClicked;
  if($(e.target).is('.drag') || $(e.target).is('.drags')  ){
    lastClicked = e.target;
  }
  $('.fa-bold').click(function(){
        $(lastClicked).toggleClass('bold');
  })

});