Question

因此，我正在研究一个JavaScript项目，现在我需要找到一种方法，如果按下四个按钮之一，它将如何执行if命令。代码基本上是这样的：

i=1
if(i==1){
  [[...]]
  $("#button1").click(function() {
    i++
  }
}
if(i==2) {
  [[..]]
}

我以为JavaScript会检查if（i == 2），看得出我是2并执行操作，但是并没有...

Answer 1

您可以使用带有不同onClick按钮的开关盒。然后从那里调用其他函数。

$('button').on('click', function () {
  var i = 0;
  switch ($(this).attr('id')) {
    case "btn1": i+=1; break;
    case "btn2": i+=2; break;
    case "btn3": i+=3; break;
    case "btn4": i+=4; break;
  }
  console.log(i);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn1">1</button>
<button id="btn2">2</button>
<button id="btn3">3</button>
<button id="btn4">4</button>

Answer 2

此解决方案使用jquery（我注意到您已经在使用它）。

您需要能够唯一标识各个按钮，如果您为每个按钮添加一个带有索引的属性，那么这是可能的。

一旦有了此唯一的标识属性，就可以为带有行$("button[btn-ind='2']").click( function() { ... });的各个按钮创建单击事件。另外，您可以对任何按钮应用常规点击事件，并通过检查属性（即$(this).attr("btn-ind")的值）来区分该点击事件。

按钮1和2在下面的代码中都有自己的点击事件。
按钮3和4仅通过常规button选择器具有单击事件。

让我知道这是否不是您想要的。

$("button[btn-ind='1'").click( function() {
  console.log($(this).text() + " clicked");
});


$("button[btn-ind='2'").click( function() {
  console.log($(this).text() + " clicked");
});


$("button").click( function() {

  if ( $(this).attr("btn-ind") == "3" ) {
  
    console.log($(this).text() + " clicked");
    
  } else if ( $(this).attr("btn-ind") == "4") {
  
    console.log($(this).text() + " clicked");
    
  }
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button btn-ind="1">Button 1</button>
<button btn-ind="2">Button 2</button>
<button btn-ind="3">Button 3</button>
<button btn-ind="4">Button 4</button>

Answer 3

我认为您弄错了底层事件模式。您正在尝试使用简单的过程编程来区分按下的按钮，但这甚至没有意义。

您应该为每个按钮附加一个不同的事件处理程序，然后简单地执行该按钮应该执行的操作：

<button type="button" id="button1">1</button>
<button type="button" id="button2">2</button>
<button type="button" id="button3">3</button>
<button type="button" id="button4">4</button>

<script>

  $("#button1").on("click", () => {
    // button 1 was pressed, do what you must
  };

  $("#button2").on("click", () => {
    // button 2 was pressed, do what you must
  };

  $("#button3").on("click", () => {
    // button 3 was pressed, do what you must
  };

  $("#button4").on("click", () => {
    // button 4 was pressed, do what you must
  };

</script>

通过使用诸如data-*之类的HTML属性对按钮进行参数化，可以实现更小的代码占用。不要使用任意的，发明的属性，因为它们不符合HTML5。在这里，我使用data-command属性来表明不需要索引：

<button type="button" data-command="start">1</button>
<button type="button" data-command="faster">2</button>
<button type="button" data-command="slower">3</button>
<button type="button" data-command="stop">4</button>

<script>

  // attach event to all buttons with a data-command attribute
  $("button[data-command]").on("click", () => {
    // distinguish by data-command attribute
    switch ($(this).data("command"))
    {
      case "start":
        // perform the "start" action
        break;
      case "faster":
        // perform the "faster" action
        break;
      case "slower":
        // perform the "slower" action
        break;
      case "stop":
        // perform the "stop" action
        break;
      default:
        throw "unrecognized command (was \"" + $(this).data("command") + "\")";
    }
  };

</script>

如果按下四个按钮之一，JavaScript会执行某些操作

3 个答案: