Question

我有

$('#BtOpenFile').click(function () { SetTimeextendBtn(); });

但是有多个按钮具有不同的ID，例如#BtAquire, #BtDelete, ...，我想对所有按钮使用SetTimeextendBtn()。我不想重复这个功能。

我们怎么能这样做？

Answer 1

您可以使用逗号

在选择器中添加多个ID

$('#BtOpenFile, #BtAquire').click(function () { SetTimeextendBtn(this); });

将当前对象传递给SetTimeextendBtn（this）;

function SetTimeextendBtn(source)
{
    alert(source.id);
}

通过使用要绑定单击处理程序的同一个类，应考虑另一种方法。假设你有一个普通类.btn

的按钮

 $('.btn').click(function () { SetTimeextendBtn(this); });

注意：如果您的点击处理程序只是调用一个函数并传递当前对象，那么您可以直接将该函数传递给click：

$('.btn').click(SetTimeextendBtn);

您可以使用SetTimeextendBtn访问this中的源按钮（对象）以获取DOM对象，使用$(this)访问jQuery对象以获取点击按钮。

Answer 2

使用课程。

此外，如果匿名函数中没有其他内容，请将其废弃并直接附加其他函数

$('.BtActions').on("click",SetTimeextendBtn);

如果您需要知道点击了什么，可以直接在功能中访问该按钮：

function SetTimeextendBtn() {
  var id = this.id; // or $(this).prop("id");
}

Answer 3

您可以使用带选择器的属性开始 [name^=”value”] ，这将选择ID为Bt的所有元素。但最好为所有这些按钮使用通用的class名称。

$('[id^=Bt]').click(function() {
  SetTimeextendBtn(this);
});

function SetTimeextendBtn(ele) {
  alert(ele.id);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="Bt1">a</button>
<button id="Bt2">b</button>
<button id="Bt3">c</button>
<button id="Bt4">d</button>
<button id="Bt5">e</button>

Answer 4

您可以使用multiple selector：

$('#BtOpenFile, #BtAquire, #BtDelete').click(function () {
    SetTimeextendBtn();
});

或者，您可以在按钮中添加一个类并使用class selector：

$('.extend-time').click(function () {
    SetTimeextendBtn();
});

正如其他人已经提到的那样，如果您只是调用一个函数，则不需要匿名函数包装器：

$('.extend-time').click(SetTimeextendBtn);

一个函数用于具有不同id的多个按钮

4 个答案: