创建可重用的java脚本代码

时间:2017-10-03 10:17:57

标签: javascript jquery performance bootstrap-4

Form sampleError sample我的场景是点击ADD VEHICLE按钮意味着它会生成新的输入框,我试图重用相同的java脚本来生成输入文本框,我 尝试使用ID,

DECLARE
addresses VARCHAR(200);

 CURSOR allAddresses IS
      SELECT * 
      FROM ALL_ADDRESS;
BEGIN
 FOR rec IN allAddresses LOOP
      addresses := addresses || rec;  
 END LOOP;
 DBMS_OUTPUT.PUT_LINE(addresses);
END;

它只支持特定的地方,

如果我尝试使用班级名称

   var wrapper         = $("#vehiclegroupid"); //Fields wrapper
   var add_button      = $("#addvehicleBtnid"); //Add button ID  

它会扰乱其他相关组件。这就是来源

HTML

 var wrapper         = $(".summa"); //Fields wrapper
  var add_button      = $(".summa2"); //Add button ID

的JavaScript

<!-- Two Wheeler -->
<div class="form-group" id="vehiclegroup">
<label for="vehicleid">Add Two Wheeler(s) Details</label>
<div id="vehiclegroupid" class="summa"></div>
<input type="button" id="addvehicleBtnid" value="Add Vehicle" class="form-control col-md-2 summa2"></input>
</div>

<!-- Four Wheeler -->
<div class="form-group" id="fourvehiclegroup">
<label for="vehicleid">Add Four Wheeler(s) Details</label>
<div id="vehiclegroupid2" class="summa"></div>
<input type="button" id="addvehicleBtnid2" value="Add Vehicle" class="form-control col-md-2 summa2"></input>
</div>

请帮我制作可重复使用的脚本代码...提前致谢

1 个答案:

答案 0 :(得分:1)

如果我理解正确,你所拥有的是一组重复的元素,其中包含一个按钮,你试图拥有一个单击处理程序,当点击一个按钮时,它只影响 那个本地小组而不是所有重复小组。

您可以通过将选择器与某些DOM遍历相结合来实现此目的。您仍然可以拥有一个处理程序,它只需要根据点击的内容更具体地识别目标。

目前你的处理程序中的逻辑是:

  

找到所有匹配的.summa元素。附加新的HTML。

相反,你想要这个:

  

this,找到最近的.summa元素。附加新的HTML。

this当然是点击的按钮。在这种情况下,找到“最近”的一种方法是遍历最近的公共父元素,然后在其中找到目标元素。

这样的事情:

$('.summa2').click(function(e){
    var wrapper = $(this).closest('div.form-group').find('.summa');

    // the rest of your click handler code
});

所以从this(被点击的按钮)开始,选择器“向上”移动到最近的div.form-group(这是整个重复的容器),然后“向下”遍历到目标.summa(该组中的目标div)。

更新:当然,由于您的后续点击处理程序依赖于wrapper变量,现在它不再可以执行此操作。只需直接使用选择器而不是变量:

$('.summa').on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); x--;
})