javascript - 如何给选择器隐式范围

Question

我编写了一个事件处理程序，用于检测选择选项列表中的更改，然后根据所选值修改一些同级输入。

我现在想要推广此功能，以便我可以同时使用多组(驾驶选择选项列表 + 同级)。新的 onChange 处理程序可能如下所示:

$('.select-list').on('change', handleChange);

方法是这样的:

function handleChange(event){
  $parent = $(event.delegateTarget).closest('.parent');
  var parentId = '#' + $parent.attr('id');

  $(parentId + '.foo').flyAway();
  $(parentId + '.bar').destroy();
  $(parentId + '.bax').render();
  $(parentId + '.qux').doAGiggy();
  $(parentId + '.lorem').applyPerfume();
  $(parentId + '.ipsum').eatBetter();
  // ... several times
}

我不想在整个处理程序中重复 parentId 部分，因为它很困惑且难以维护。有没有办法给我的选择器隐式作用域，即 $('.a-class') 知道我希望它在哪个 parent-id 内“工作”？

Answer 1

假设您使用以下代码委托(delegate)事件(正如在 .on() 上使用所建议的那样):

$('.parent-container').on('change', '.select-list', handleChange);

事件对象有 delegateTarget属性。

Description: The element where the currently-called jQuery event handler was attached.

所以你可以这样做:

function handleChange(event){

  $(event.delegateTarget).find('.a-class').doStuff();
  // .. now use a similar selector $(parentId + ..) several times
}