Question

我正在尝试将类似元素的jQuery click事件分组在一起。基本上，当单击特定按钮时，我要向其添加新类的主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

在通用类上注册click事件，然后获取颜色的ID？

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

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

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

})

将相似的jquery点击事件分组在一起

1 个答案: