多个.click事件的更有效的代码？

Question

而不是做

$("#IsOutdoors").click(function () {
    SendData();
});

$("#HasPatio").click(function () {
    SendData();
});

如果我想做多个.click evnts，有没有更好的方法？ 谢谢！

Answer 1

只需在一个字符串中使用所有选择器，并用逗号分隔它们：

$("#IsOutdoors, #HasPatio").click(function () {
    SendData();
});

---

对于更简洁的版本，您可以将SendData函数本身传递给click：

$("#IsOutdoors, #HasPatio").click( SendData );

虽然这会改变this内的SendData值。

Answer 2

$("#IsOutdoors,#HasPatio").click(SendData);

Answer 3

有很多方法：

• 组合选择器
  就像在CSS中一样，使用逗号来定位多个选择器：
  $("#IsOutdoors, #HasPatio").click(SendData);
• 添加到jQuery集合
  您可以使用$.add()向现有jQuery集合添加额外元素。由于个别选择是使用getElementById()而非完整querySelectorAll()或Sizzle的内部快捷方式，因此效率可能更高。
  $("#IsOutdoors").add("#HasPatio").click(SendData);
• 向元素添加公共类
  这实际上不是脚本解决方案，但如果元素在逻辑上相似，则类可能是合适的。
  {{1 }}

Answer 4

这取决于你的意思更好。你想要更少的代码，但结果相同吗？你可以做点什么

$("#IsOutdoors, #HasPatio").click(SendData);

如果您希望减少点击处理程序的数量，例如，如果您有多个DOM元素都具有相同的点击处理程序，则可以将事件处理程序放在父元素上。然后，您可以列出应该委派此事件的元素的所有ID，也可以为它们提供像clickable这样的公共类。假设您的HTML如下所示：

<div id='someParent'>
  <div id='IsOutdoors' class='clickable'></div>
  <div id='HasPatio' class='clickable'></div>
</div>

您可以将点击处理程序简化为

$("#someParent").on('click', '.clickable", SendData);

或者如果您不想像我建议的那样添加类

$("#someParent").on('click', '#IsOutdoors #HasPatio", SendData);