Javascript 如何为选择器指定隐式作用域

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

我现在想推广这个功能，这样我就可以同时使用多组（驱动选择选项列表+同级）。新的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
}

方法是这样的：

$('.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'）

知道我希望它在哪个

父id中“起作用”
您可以通过将父id作为第二个参数传递给
$
函数来确定jQuery选择器的作用域：

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

假设您使用以下代码委托事件（如使用on.on（）所建议的）：

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

事件对象具有属性

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

所以你可以做：

function handleChange(event){

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

该代码无效，无法执行任何操作。你想干什么？谁他妈的投了这个票？抱歉，处理者并不重要。我已经更改了帖子-重要的是我不想重复选择器中的
parentId
。我宁愿让每个选择器“理解”上下文，因为它是共享的。这样的事情存在吗？谢谢，这些信息确实帮助我使代码工作得更好。我（措辞糟糕的问题）的真正含义是，我是否有办法不必重复选择器的
parentId
部分。如果您需要更多信息，我编辑的示例在上面。事实上，现在的问题完全不同了；-）类似于
$（parentId）.find（'.a-class、.a-class1、.a-class2、.a-class3'）.doStuff（）（你应该考虑使用不同于“Case1”、“Case2”……用类来选择它是没有用的。我再次改变它，我认为它正在变好：）我在使用伪代码，我想这就是很多混乱来自哪里的原因，无论如何……每个$（parentId+'.child选择器）上的操作也不同，这就是我无法链接的原因。否则这将是一个完美的解决方案。然后您可以使用-
$（parentId）.find（'.foo'）.flyAway（）.end（）.find（'.bar'）.destroy（）…
——假设您的方法返回jquery。否则，你就会被这种方式绊倒。