Question

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

我现在想要概括这个功能，以便我可以同时使用几组（driving-select-option-lists + siblings）。新的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

假设您使用以下代码委托事件（因为在.on（）上使用建议）：

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

事件对象具有delegateTarget属性。

描述：附加了当前调用的jQuery事件处理程序的元素。

所以你可以这样做：

function handleChange(event){

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

Answer 2

您可以通过将父作为第二个参数传递给$函数来定位jQuery选择器：

$('.a-class', parent).doStuff();
$('.another-class', parent).doOtherStuff();

我如何给选择器隐式范围

2 个答案: