javascript - 将相似的 jquery 单击事件分组在一起

Question

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

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

我想根据我拥有的几个按钮向该 div 添加新类

    <div class="triggers">
      <div class="changer" id="blue">Blue</div>
      <div class="changer" id="red">Red</div>
      <div class="changer" id="green">Green</div>
    </div>

所以我在 CSS 中创建了类，然后当然会根据每个按钮 ID 的点击情况将它们添加到主 div 中

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

    });

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

Answer 1

在普通类上注册点击事件，然后抓取id是颜色？

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

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

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

})