Question

Form sample，Error 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>

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

Answer 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--;
})

创建可重用的java脚本代码

1 个答案: