Javascript 将类似的jquery单击事件分组在一起

我试图将类似元素的jQuery单击事件组合在一起。基本上，我有一个主div，我想在单击某个按钮时向其中添加新类。所以我有

    <div class="main"></div>

---

我的问题是如何将这些单击事件分组在一起，这样就不会根据每个按钮的ID反复重复相同的代码块？

在公共类上注册单击事件，然后获取颜色ID

$(".changer").click(function() {

  let colour = String($(this).attr("id"));

  if (colour) {
       $(".main").addClass(colour).delay(500).queue(function(){
          $(this).removeClass(colour).dequeue();
        });
  }

})

看看这个答案

    $(document).ready(function(){

    $('#blue').click(function() {
      $(".main").addClass("blue").delay(500).queue(function(){
      $(this).removeClass("blue").dequeue();
     });
    });

    $('#red').click(function() {
      $(".main").addClass("red").delay(500).queue(function(){
      $(this).removeClass("red").dequeue();
     });
    });

    $('#green').click(function() {
      $(".main").addClass("green").delay(500).queue(function(){
      $(this).removeClass("green").dequeue();
     });
    });

    });

$(".changer").click(function() {

  let colour = String($(this).attr("id"));

  if (colour) {
       $(".main").addClass(colour).delay(500).queue(function(){
          $(this).removeClass(colour).dequeue();
        });
  }

})