jquery - 将事件附加到子元素、代码改进和更好的可维护性

Question

我有一个表格，我用属性来识别form[data-role="party-form"]。

我需要将逻辑附加到它的 N 个元素上[data-role="element1...N"]，我已经这样做了：

$('form[data-role="party-form"] [data-role="element1"]').change(function(e){
       var el = $(e.target);
       var form = el.parents('form[data-role="party-form"]');
       // custom logic for element 1 accessing other form elements
}

// ...

$('form[data-role="party-form"] [data-role="elementN"]').change(function(e){
       var el = $(e.target);
       var form = el.parents('form[data-role="party-form"]');
       // custom logic for element N accessing other form elements
}

我不太喜欢这段代码，因为有很多重复（父选择器和获取父表单的逻辑）

我正在考虑重构为“onchange”侦听器以“输入”表单元素（以及switch单击元素上的），或更面向对象的方法，但是 - 在我继续之前 - 任何人都想到了一种更好的方法执行这个？谢谢

Answer 1

使用 jQuery 属性 ^ 选择器，它将匹配属性开始宽度的所有元素：

$('form[data-role="party-form"] [data-role^="element"]').change(function(e){
       var el = $(e.target);
       var form = el.parents('form[data-role="party-form"]');
       var index = form.attr("data-role").replace("element","");
       // custom logic for element [index] 
}