Question

我正在制作一个Ludo游戏，所以如果我在4个框中单击任何一个框（例如r1，r2，r3，r4，都需要它应该执行分配的工作，然后，其余3个框保持不变（即单击时不执行任何操作）。我尝试了else if条件，但无法正常工作。请帮帮我。

r1，r2，r3和r4是其中id个盒子。

我想做的事情：

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

下面是您的buttons：

 <input id="r1" type="button" value="R1" />\
  <input id="r2" type="button" value="R2" />\
  <input id="r3" type="button" value="R3" />\
  <input id="r4" type="button" value="R4" />\

然后在您的jquery中输入如下内容：

$(document).delegate("input[type='button']", "click",
    function(e){
    var clickbtn= this.id;//getting id of btn
        console.log("#"+clickbtn);
      //checking which btn is clicked
       if(clickbtn=="r1"){
        $("#"+clickbtn).css("position", "absolute");
         $("#"+clickbtn).animate((P[0]), 1000);
       }else if(clickbtn=="r2"){
        $("#"+clickbtn).css("position", "absolute");
         $("#"+clickbtn).animate((P[0]), 1000);
       }else if(clickbtn=="r3"){
       $("#"+clickbtn).css("position", "absolute");
         $("#"+clickbtn).animate((P[0]), 1000);

       }else{
        $("#"+clickbtn).css("position", "absolute");
         $("#"+clickbtn).animate((P[0]), 1000);
       }
});

希望这会有所帮助！

Answer 2

$(".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>

jQuery中单击功能的条件如何使用else？

2 个答案: