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属性^ selector，它将匹配属性开始宽度的所有元素：

$('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] 
}

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

1 个答案: