Question

我有几个按钮，在这里我想提出一个HTML表单的jQuery模态窗口：

<button class="add1">Add1</button> 
<button class="add2">Add2</button> 


<div id="form1"> 
<form id='AddForm1' name='' method='post' action='<?php echo htmlspecialchars($_SERVER['REQUEST_URI']); ?>'> 
    <label for="Name">Name:&nbsp;</label> 
    <input id="Name" name="camera_name" size="24" maxlength="36" value="Enter label for camera" onclick="this.select()" /> 
    <label for='Quality'>Quality:&nbsp;</label> 
    <select id='Quality' name='quality'> 
     <option value='HIGH' selected='selected'>High</option> 
     <option value='MEDIUM'>Medium</option> 
     <option value='LOW'>Low</option> 
    </select> 
    <label for='Status'>Status:&nbsp;</label> 
    <select id='Status' name='status'> 
     <option value='ENABLED' selected='selected'>On</option> 
     <option value='DISABLED'>Off</option> 
    </select> 
    <label for='EmailNotice'>Email notice:&nbsp;</label> 
    <select id='EmailNotice' name='email_notice'> 
     <option value='ENABLED' selected='selected'>On</option> 
     <option value='DISABLED'>Off</option> 
    </select> 
    <label for='Sensitivity'>Sensitivity:&nbsp;</label> 
     <select id='Sensitivity' name='sensitivity'> 
     <option value='HIGH'>High</option> 
     <option value='AVERAGE' selected='selected'>Average</option> 
     <option value='LOW'>Low</option> 
    </select> 
    <input type='hidden' name='type' value='TYPE1' /> 
    <button type='submit' class='submitme' name='add' value='Add'>Add</button> 
    <button type='button' class='cancel_changes' name='cancel_changes' value='Cancel'>Cancel</button> 
</form> 
</div> 

现在我有了像普通物品第二种形式名称，质量，状态和电子邮件通知，但根据所选按钮的不同，有些内容会有所不同。

<div id="form2"> 
<form id='AddForm2' name='' method='post' action='<?php echo htmlspecialchars($_SERVER['REQUEST_URI']); ?>'> 
    <label for="Name">Name:&nbsp;</label> 
    <input id="Name" name="camera_name" size="24" maxlength="36" value="Enter label for camera" onclick="this.select()" /> 
    <label for='Quality'>Quality:&nbsp;</label> 
    <select id='Quality' name='quality'> 
     <option value='HIGH' selected='selected'>High</option> 
     <option value='MEDIUM'>Medium</option> 
     <option value='LOW'>Low</option> 
    </select> 
    <label for='Status'>Status:&nbsp;</label> 
    <select id='Status' name='status'> 
     <option value='ENABLED' selected='selected'>On</option> 
     <option value='DISABLED'>Off</option> 
    </select> 
    <label for='EmailNotice'>Email notice:&nbsp;</label> 
    <select id='EmailNotice' name='email_notice'> 
     <option value='ENABLED' selected='selected'>On</option> 
     <option value='DISABLED'>Off</option> 
    </select> 
    <label for='UserName'>User name:&nbsp;</label> 
     <input id='UserName' size='14' maxlength='16' name='add_user' value="Enter username" onfocus="if(this.value=='Enter username') this.value='';" /> 
    <label for='Pass'>Password:&nbsp;</label> 
    <input type='password' size='12' maxlength='16' id='Pass' name='add_pass' value='' /> 
     <label for='IP'>Enter IP:&nbsp;</label> 
     <input id='IP' name='add_ip' size='10' value="Enter IP" onfocus="if(this.value=='Enter IP') this.value='';" /> 
     <label for='Port'>Enter port:&nbsp;</label> 
     <input id='Port' name='add_port' size='12' maxlength='6' value="Enter Port" onfocus="if(this.value=='Enter Port') this.value='';" /> 
    <input type='hidden' name='type' value='TYPE2' /> 
    <button type='submit' class='submit' name='add' value='Add'>Add</button> 
    <button type='button' class='cancel_changes' name='cancel_changes' value='Cancel'>Cancel</button> 
</form> 
</div> 

根据他们点击的按钮，它将打开一个jQuery对话框。

var $dialog1 = $('#form1').dialog({ 
    modal:true, 
    autoOpen: false, 
    resizable:false, 
    width: 625 
}); //init dialog 

var $dialog2 = $('#form2').dialog({ 
    modal:true, 
    autoOpen: false, 
    resizable:false, 
    width: 625 
}); //init dialog 

//events 
$('.add1').click(function(e) { 
    $dialog1.dialog('open'); 
}); 

$('.add2').click(function(e) { 
    $dialog1.dialog('open'); 
}); 

$(".cancel_changes").click(function() { 
    $dialog1.dialog('close'); 
    $dialog2.dialog('close'); 
}); 

$(".submit_camera").click(function() { 
    $("#AddForm1").validate({ 
    //all validation stuff 
}); 

终于到了我的问题，这开辟了对话与适当的形式，但我开始在这里复制的东西很多。一旦我在提交中得到验证的东西，它就开始疯狂的重复数量。我的表单需要清理，因为我有相同名称的ID。我认为必须有比复制一切更好的方法。或许只有一种形式？

Answer 1

为插件创建选项对象时，还可以将现有对象作为变量传递给插件，而不是在代码中再次复制同一对象。

在表单的情况下，您可以创建一个包含所有重复规则的对象，然后使用特定于每个表单的规则来扩展该对象。

尽管在这种情况下代码没有很大节省，但向元素添加数据属性也可以帮助减少代码。一般来说，最好不要使用独特的风格和使用add1, add2和add_btn等元素。然后代码中的css选择器更容易在一个选择器中聚合众多元素。

使用横动技术，而不用担心ID的，并且因此在complicatiing或复制码是非常有帮助

简单化HTML国防部 - 通用类和数据属性：

<button class="add1 add_btn" data-form_num="1">Add1</button> 

并入一个部分JS及其简化多种方式来精简上面的每个音符：

/* store dialog options for numerous dialogs*/ 
var dialogOpts={ 
    modal:true, 
    autoOpen: false, 
    resizable:false, 
    width: 625 
} 
/* combine selectors for dialogs - one common class would simplify further*/ 
$('#form1,#form2 ').dialog(dialogOpts); //init dialog 


/* combine selectors by using common class*/ 
$('.add_btn').click(function(e) { 
     /* use attributes to determine which to open */      
    $('#form'+ $(this).data('form_num')).dialog('open'); 
}); 



$(".cancel_changes").click(function() { 
    /* tarverse rather than worry about specific ID's*/        
    $(this).closest('form').parent().dialog('close'); 
}); 


/* rules for all forms */ 
var all_forms_rules={ 
    'camera_name': 'required', 
    'email_notice': 'required' 
} 

var form_1_rules={ 
    'sensitivity': 'required' 
} 
/* extend form_1_rules by merging "rules" */ 
form_1_rules= $.extend({}, form_1_rules,all_forms_rules) 

$(".submit_camera").click(function() { 
    $("#AddForm1").validate({ 
      /* pass rules object as variable */    
      rules: form_1_rules 

    }) 
});