Question

如果我用变量替换id，以下代码将不起作用。我尝试了不同的组合，但没有奏效。我在表单元素上使用。如果有人知道如何完成这项工作，请告诉我。感谢。

这有效：

$('#Button1, #Button2').click(function() {
// 
});

以下是我的示例代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
<style>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>                    <script>    
    $(document).ready(function(){
   var Btn1 = $("#buy");
       var Btn2 = $("#preview");        
   $(Btn1, Btn2).click(function(){ console.log("hey");})        
});

</script>
</head>
<body>
  <form>
      <input type="button" value="Preview" id="preview" />
      <input type="button" value="Buy" id="buy" />
  </form>

</body>
</html>

Answer 1

您可以连接jQuery元素并在两者上分配单击功能。

Btn1.add(Btn2).click(function(){ 
    console.log("hey");
});

更好的解决方案是为按钮提供一些类，然后分配点击它们：

$('.myButton').click(function() { 
    console.log("hey");
});

Answer 2

您还可以将功能与事件绑定分开。这可以成为更高级用途的强大技术。

var my_func = function(){ console.log("hey");}

$("#buy").click(my_func);
$("#preview").click(my_func);

Answer 3

更简单的解决方案：）

$("input[type='button']").click(function(){
   console.log("hey");
});

或者只是为所有按钮提供通用样式类

 <input type="button" class=".buttonClass" value="Preview" id="preview" />
 <input type="button" class=".buttonClass" value="Buy" id="buy" />

下面是必需的javascript。

  $(".buttonClass").click(function(){
           console.log("hey");
    });

Answer 4

您将jquery元素放在单独的变量中，并在函数调用中使用它们。逗号在解决方案中不会按预期运行。您可以像这样使用选择器$（'＃buy，＃preview'）。您的JS代码将如下所示：

    $(document).ready(function(){
       $('#buy, #preview').click(function(){ console.log("hey");})        
    });

将相同的函数绑定到jquery中的不同元素

4 个答案: