javascript - 不同元素上的 jquery onclick 或 onchange

Question

我有一个选择菜单和两个箭头，用于更改选择的值 (+/-)。今天，我有一个单击箭头时触发的函数，该函数会更新选择中的值，但如果有人直接在下拉列表中更改值(而不是使用箭头)，我还想添加一个函数来执行相同的操作.

我可以重写相同的函数，只需将箭头的 ID 更改为选择的 ID，并将 onclick 更改为 onchange 但这是多余的。我更喜欢使用 OR 运算并且只编写一次函数。

有没有办法在两个事件之间进行“或”运算？

当前代码:

$(document).ready(function(){
   $('img[id*="downArrow"]').on("click", function(){
     //update the value in the select
   });
});   

我想要实现的目标:

$(document).ready(function(){
    $('img[id*="downArrow"]',#idOfMySelect).on("click onchange", function(){
         //update the value in the select
    });
});  

Answer 1

您可以在选择器之间使用逗号来组合它们，而在事件之间不使用逗号。

不过您需要小心，因为您可能不想在单击 select 元素时触发该函数:

$('img[id*="downArrow"], #mySelect').on('click change', function(e) {
  if(e.type==='change' || this.id!=='mySelect') {
    alert('Success!');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="downArrow" src="http://placehold.it/50x50">
<select id="mySelect">
  <option>Option 1</option>
  <option>Option 2</option>
</select>