如何在jQuery中将两个事件处理程序组合成一个?

时间:2014-08-25 20:47:46

标签: jquery

有没有一种简单的方法将这两个jQuery函数合并为一个,从而消除了不必要的重复?

$('form#search input').on('keyup', function() {
    if ($(this).val() == '') {
    $('a#clear').hide();
  }
  else {
    $('a#clear').show();
  } 
});

$('form#search select').on('change', function() {
    if ($(this).val() == '') {
    $('a#clear').hide();
  }
  else {
    $('a#clear').show();
  }
});

感谢您的帮助。

2 个答案:

答案 0 :(得分:9)

如果你想以最优雅,最短的方式有条件地绑定这些,你可以这样做:

var $formSearch = $('form#search'),
    hideShow = function () {
        if ($(this).val() == '') {
          $('a#clear').hide();
        }
        else {
          $('a#clear').show();
        }
    };

$formSearch.find('input').on('keyup', hideShow); 
$formSearch.find('select').on('change', hideShow); 

如果您希望为两个选择器触发两个事件,则可以执行此操作。这可能是可以的,因为您可能希望无论如何都要触发它们。

$('form#search input, form#search select').on('keyup change', function() {
    if ($(this).val() == '') {
    $('a#clear').hide();
  }
  else {
    $('a#clear').show();
  }
});

答案 1 :(得分:6)

定义一个处理事件的函数,然后按如下方式分配:

function inputChanged() {
    if ($(this).val() == '') {
        $('a#clear').hide();
    }
    else {
        $('a#clear').show();
    }
}

$('form#search input').on('keyup', inputChanged);
$('form#search select').on('change', inputChanged);