javascript - 如何在 jQuery 中使用 else if 条件单击函数？

Question

我正在制作一款卢多游戏，因此我需要单击任何一个框(例如 r1、r2、r3、r4)，其中 4 个框应该完成分配的工作，之后，剩余 3 个框保持不变(即单击时不执行任何操作)。我尝试了 else if 条件，但它不起作用。请帮帮我。

这里r1、r2、r3和r4是ids'盒子的数量。

我想做的事:

if ($('#r1').click()) {
  $('#r1').click(function() {
    $(this).css("position", "absolute");
    $(this).animate((P[0]), 1000);
  });
} else if ($('#r2').click()) {
  $('#r2').click(function() {
    $(this).css("position", "absolute");
    $(this).animate((P[0]), 1000);
  });
} else if ($('#r3').click()) {
  $('#r3').click(function() {
    $(this).css("position", "absolute");
    $(this).animate((P[0]), 1000);
  });
} else if ($('#r4').click()) {
  $('#r2').click(function() {
    $(this).css("position", "absolute");
    $(this).animate((P[0]), 1000);
  });
}

Answer 1

$(".btn").on("click",function(){
    var _ID=this.id;
    if(_ID=="#r1")
        $(this).css("background-color","red");
    else if(_ID=="#r2")
        $(this).css("background-color","yellow");
    else if(_ID=="#r3")
        $(this).css("background-color","green");
    else if(_ID=="#r4")
        $(this).css("background-color","blue");
        
    console.log(_ID);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="#r1" class="btn">click1</button>
<button type="button" id="#r2" class="btn">click2</button>
<button type="button" id="#r3" class="btn">click3</button>
<button type="button" id="#r4" class="btn">click4</button>