Question

因此，我是JQuery的新手，正在尝试编写一个程序，当单击按钮时，该程序返回（用于测试的控制台日志）按钮的值。由于某些原因，单击按钮时我的代码未注册，此外，我认为没有为“ car”参数解析正确的值。

这是我的代码（可能超出了所需的数量，但不确定我要去哪里哪里）：

$(document).ready(function() {
  $(":button").click(myFunction(this.value));
});

function myFunction(car) {
  selection = car;
  console.log(selection);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" name="newButton" value="Mercedes"> <br>
<input type="button" name="newButton" value="BMW"> <br>
<input type="button" name="newButton" value="Audi">

我希望程序记录所按下按钮的值，但是目前不记录任何内容。

谢谢

Answer 1

问题是您正在此处执行该功能。您应该分配它，而不是执行它。

$(document).ready(function() {
  $(":button").click(myFunction);
});

function myFunction(event) {
  selection = event.target.value;
  console.log(selection);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" name="newButton" value="Mercedes"> <br>
<input type="button" name="newButton" value="BMW"> <br>
<input type="button" name="newButton" value="Audi">

您可以使用上面的方法，或者更好的方法是这样：

$(document).ready(function() {
  $(":button").click(e => myFunction(e.target.value));
});

function myFunction(car) {
  selection = car;
  console.log(selection);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" name="newButton" value="Mercedes"> <br>
<input type="button" name="newButton" value="BMW"> <br>
<input type="button" name="newButton" value="Audi">

Answer 2

这在没有jQuery帮助的情况下非常容易：

document.addEventListener('DOMContentLoaded', function() { // native way to do $(document).ready(function() {
  // get a list of all buttons and iterate over it
  for (const btn of document.querySelectorAll('input[type=button]')) {
    // and add a click listener to each one of them
    btn.addEventListener('click', function(event) {
      console.log(btn.value);  
    })
  }
})

<input type="button" name="newButton" value="Mercedes"> <br>
<input type="button" name="newButton" value="BMW"> <br>
<input type="button" name="newButton" value="Audi">

按钮不响应使用JQuery的单击

2 个答案: