创建可重用的 java 脚本代码

Question

表单示例，错误示例我的场景是当单击添加车辆按钮时意味着它将生成新的输入框，我尝试重用相同的 java 脚本来生成输入文本框，我尝试使用 ID，

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

它只会支持特定的地方，

如果我尝试使用类名

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

它会干扰其他相关组件..这是来源

HTML

<!-- 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>

JavaScript

/**
 * This is especially for adding input fields for entering co-owner details
 */

$(document).ready(function() {
    var max_fields      = 5; //maximum input boxes allowed
   // var wrapper         = $("#vehiclegroupid","#vehiclegroupid2"); //Fields wrapper
  //  var add_button      = $("#addvehicleBtnid","#addvehicleBtnid2"); //Add button ID
  var wrapper         = $(".summa"); //Fields wrapper
  var add_button      = $(".summa2"); //Add button ID
    var x = 0; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment now x=1 after x++ x=2,so next code 2%2==0 is true


        $(wrapper).append('<div class="form-row">'          
                +'<!-- Vehicle Name -->'
                +'<div id="TextBoxDiv'+x+'" class="form-group col-md-4">'
                +'<label for="cowner'+x+'">Vehicle Name</label>'
                +'<input id="cowner'+x+'" type="text" value="" class="form-control" placeholder="Enter Name"></input>'
                +'</div>'

                +'<!-- Vehicle Registration Number -->'
                +'<div class="form-group col-md-4">'
                +'<label for="oph'+x+'">Vehicle Registration Number</label>'
                +'<input id="oph'+x+'" type="text" value="" class="form-control" placeholder="Ex (TN 99 AD 9999)"></input>'
                +'</div>'


                    +'<a href="#"class="remove_field col-md-1"> X </a>'
                    +'</div>');

        }
        else{
            alert("Sorry..!You Cannot Add More Than 5 Vehicles");
        }
    });

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

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

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