jQuery同一个函数用于多个事件,每个事件都针对不同的元素?

时间:2015-12-16 21:11:22

标签: javascript jquery events

我想完成正在做的事情here除了一个转折: 我希望每个事件都针对不同的元素。

用例是一个选择框,除了第一个"选择你的选项"选项已选中

$(document).on('change', 'select:nth-child(1)', function(e) ){
  do_stuff();
});


$(document).on('click', 'select:not(:first-child)', function(e) ){                         
  do_stuff();
});

是否有一种组合的,更简洁的方法来执行此操作,而无需创建do_stuff()

如果没有两次事件发射,怎么办呢?

2 个答案:

答案 0 :(得分:1)

测试函数中的位置。

$(document).on("change click", "select option", function(e) {
    if ($(this).index() == 0) {
        // do stuff for first child
    } else {
        // do stuff for other children
});

但是,我不认为在change元素上触发<option>事件,它只是在<select>本身触发。因此,您的基本前提似乎是错误的,因为change事件永远不会触发select:nth-child(1)

答案 1 :(得分:1)

你有答案,但你也可以使用这个的一些组合:

注意:选项卡到页面上的元素以触发focusin事件

$('#selectcontainer').on('change focusin manual', ".myselectthing", function(e) {
  var selectionIndex = $(this).prop('selectedIndex');
  $('#results').text("this type " + e.type + ":" + $(this).val() + " : " + selectionIndex);
});

$('#selectcontainer').find('.myselectthing').val("ralf").trigger("manual");

一些示例标记:

<div id="results">
  empty
</div>
<div id="selectcontainer">
  <select class="myselectthing">
    <option value="me">choose me</option>
    <option value="ralf">choose ralf</option>
    <option value="charlie">choose charlie</option>
  </select>
</div>

玩它:https://jsfiddle.net/96mgswas/1/