这是我的完整代码。
dataArray = ["size", "color", "material"];
//global variables
var dataArray = ["size", "color", "material"];
var dataArrayCreated = [];
var glb_array_len = dataArray.length;
var tot_len = $("#form-row_cst").find(".form-row").length;
/*--create_element--*/
function create_elment() {
var html_structure = "<div class='form-row' data-value="+ dataArrayCreated[0] +"><div class='form-group col-md-3 col-sm-12'><label class='ad_prd_lbl'>Option name</label><input type='text' class='form-control' placeholder='"+ dataArrayCreated[0] +"' value='"+ dataArrayCreated[0] +"' id="+ dataArrayCreated[0]+'_val' +"></div><div class='form-group col-md-8 col-sm-12'><label class='ad_prd_lbl'>Option values</label><input type='text' id="+ dataArrayCreated[0]+'_inp' +" class='form-control' placeholder='Separate options with a comma'></div><div class='form-group col-md-1 col-sm-12'><button class='but_all btn_rmv' type='button'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M16 6a1 1 0 1 1 0 2h-1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V8H4a1 1 0 1 1 0-2h12zM9 4a1 1 0 1 1 0-2h2a1 1 0 1 1 0 2H9zm2 12h2V8h-2v8zm-4 0h2V8H7v8z'></path></svg></button></div></div>";
$("#form-row_cst").append(html_structure).appendTo("#form-row_cst");
}
//search function
function srch() {
$.each(dataArray, function (index, value) {
console.log(value);
$("#form-row_cst").find(".form-row").each(function () {
console.log($(this).attr('data-value'));
if( $(this).attr('data-value') !== value ) {
dataArrayCreated[0] = value;
console.log("found - "+dataArrayCreated[0]);
}
});
});
}
//main function
function main_fn() {
if( tot_len <= glb_array_len ) {
//console.log("count Data - "+ tot_len+"-items");
srch();
create_elment();
}
else {
console.log("Invalid Data - "+ tot_len+"-items");
}
}
/*---click btn to create structure--*/
$("#clone_btn").click(function(){
//find created element from list
main_fn();
if( ($("#form-row_cst").find(".form-row").length) > (dataArray.length)-1 ) {
$(this).hide();
}
});
/*--remove div--*/
$(document).on("click","#form-row_cst .btn_rmv", function(){
//check if this div is last child of "#form-row_cst"
if( $("#form-row_cst").find(".form-row").length-1 < 1) {
alert("sorry, you can't delete this items");
}
else {
//remove div
$(this).parents(".form-row").remove();
}
if( ($("#form-row_cst").find(".form-row").length) < (dataArray.length)+1 ) {
$("#clone_btn").show();
}
});body {
color: rgba(70, 90, 110, 0.85);
font-size: 0.8rem;
line-height: 1.6;
font-weight: 400;
background-color: #f3f6f9;
}
.box {
border-radius: 3px;
box-shadow: 0 0px 1px rgba(0, 0, 0, 0.15);
background-color: #fff;
position: relative;
margin-bottom: 1.5rem;
}
.order_details {
padding: 15px;
}
.dropdown_div {
display: none;
}
.gry_of_bg {
background-color: #f9fafb;
}
.form-row>.col, .form-row>[class*=col-] {
padding-right: 5px;
padding-left: 5px;
}
.form-result_outer {
padding: 15px 0px 0px;
}
label {
display: inline-block;
margin-bottom: .5rem;
}
.ad_prd_lbl {
font-size: .8rem;
color: #212b35;
margin-bottom: .25rem;
}
#form-row_cst .form-row .form-control,
#form-row_cst .but_all {
min-height: 36px;
}
.input_tags_cnt {
position: relative;
width:100%;
}
#form-row_cst .input_tags_cnt .bootstrap-tagsinput {
background-color: #fff;
box-shadow: none;
border-color: rgba(120, 130, 140, 0.2);
min-height: auto;
}
.bootstrap-tagsinput {
width: 100%;
font-size: 0;
display: inline-block;
padding: 4px 6px;
color: #555;
vertical-align: middle;
border-radius: 4px;
max-width: 100%;
line-height: 22px;
cursor: text;
border: 1px solid #ccc;
}
.bootstrap-tagsinput input {
border: none;
box-shadow: none;
outline: none;
background-color: transparent;
padding: 0 6px;
margin: 0;
width: auto;
max-width: inherit;
}
#form-row_cst .form-row input,
#form-row_cst .form-row .bootstrap-tagsinput input {
color: #222;
font-size: 0.8rem;
}
.input_tags_cnt .bootstrap-tagsinput>input {
width: 100%;
}
.but_all {
padding: 5px 12px;
border-radius: 3px;
background: #fff;
border: 1px solid #c4cdd5;
line-height: 100%;
cursor: pointer;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
min-height: 34px;
}
#form-row_cst .but_all {
margin-top: 24px;
}
#form-row_cst .form-row .form-control,
#form-row_cst .but_all {
min-height: 36px;
}
#form-row_cst .form-row .form-control {
width: 100%;
}
.but_all svg {
width: 20px;
height: 20px;
line-height: 100%;
}
.cbd_table_product_table {
border: 0px;
min-width: 650px;
}
.cbd_table_product_table > thead > tr > th,
.cbd_table_product_table > tbody > tr > td {
border-left: 0px;
border-right: 0px;
border-top: 0px;
border-bottom: 1px solid #ebeef0;
vertical-align: top;
font-size: 0.86rem;
}
.cbd_table_product_table > thead > tr > th {
padding: .5rem .4rem;
color: #212b35;
font-weight: 500;
}
.cbd_table_product_table > thead > tr > th:first-child,
.cbd_table_product_table > tbody > tr > td:first-child {
padding-left: 3px;
}
.custom-checkbox {
margin: 0rem;
vertical-align: middle;
padding: 0px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
}
.custom-checkbox .custom-control-input {
width: 1rem;
height: 1rem;
position: relative;
}
.custom-control-indicator {
position: absolute;
top: .25rem;
left: 0;
display: block;
width: 1rem;
height: 1rem;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #ddd;
background-repeat: no-repeat;
background-position: center center;
background-size: 50% 50%;
}
.custom-checkbox .custom-control-input:checked~.custom-control-indicator {
background-color: #17a2b8;
}
.custom-checkbox .custom-control-input:checked~.custom-control-indicator {
background-image: url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' v…M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E);
}
.tb_Variant_tag {
font-size: .8rem;
position: relative;
padding-right: 10px;
text-transform: capitalize;
line-height: 100%;
display: inline-block;
vertical-align: middle;
}
.color_tb_Variant {
color: #29bc94;
}
.size_tb_Variant {
color: #ff9517;
}
.meterial_tb_Variant {
color: #763eaf;
}
.tb_Variant_tag:after {
content: "";
background-color: #637381;
height: 4px;
width: 4px;
position: absolute;
right: 2px;
top: 4px;
font-size: 0;
border-radius: 50%;
overflow: hidden;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="box">
<div class="order_details">
<header class="prd_hdr clearfix">
<h6>Variants</h6>
</header>
<div class="form-group">
<p>Add variants if this product comes in multiple versions, like different sizes or colors.</p>
</div>
</div>
<div class="clearfix dropdown_div" style="display: block;">
<div class="order_details gry_of_bg">
<div class="clearfix" id="form-row_cst">
<div class="form-row" data-value="size">
<div class="form-group col-md-3 col-sm-12">
<label class="ad_prd_lbl">Option name</label>
<input type="text" class="form-control" id="size_val" placeholder="Size" value="size">
</div>
<div class="form-group col-md-8 col-sm-12">
<label class="ad_prd_lbl">Option values</label>
<input type="text" id="size_inp" class="form-control" placeholder="Separate options with a comma">
</div>
<div class="form-group col-md-1 col-sm-12">
<button class="but_all btn_rmv" type="button">
<svg id="delete-minor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M16 6a1 1 0 1 1 0 2h-1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V8H4a1 1 0 1 1 0-2h12zM9 4a1 1 0 1 1 0-2h2a1 1 0 1 1 0 2H9zm2 12h2V8h-2v8zm-4 0h2V8H7v8z"></path>
</svg>
</button>
</div>
</div>
<div class="form-row" data-value="material">
<div class="form-group col-md-3 col-sm-12">
<label class="ad_prd_lbl">Option name</label>
<input type="text" class="form-control" id="material_val" placeholder="material" value="material">
</div>
<div class="form-group col-md-8 col-sm-12">
<label class="ad_prd_lbl">Option values</label>
<input type="text" id="material_inp" class="form-control" placeholder="Separate options with a comma">
</div>
<div class="form-group col-md-1 col-sm-12">
<button class="but_all btn_rmv" type="button">
<svg id="delete-minor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M16 6a1 1 0 1 1 0 2h-1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V8H4a1 1 0 1 1 0-2h12zM9 4a1 1 0 1 1 0-2h2a1 1 0 1 1 0 2H9zm2 12h2V8h-2v8zm-4 0h2V8H7v8z"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-12">
<button class="but_all" type="button" id="clone_btn">Create order</button>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：1)
一旦你知道如何利用函数接受参数和返回值的能力，你会发现这种事情（以及一般的编程）更简单，更令人满意。
根据你的意愿：
srch()查找dataArray中当前没有相应表格行的每个项目。 main_fn()致电srch()，然后创建任何缺失的行。首先写srch()以返回dataArray的过滤副本，如下所示：
function srch() {
// Return a filtered copy of `dataArray` leaving items for which there is currently no corresponding form-row.
return dataArray.filter(function(item) {
return $("#form-row_cst .form-row").filter(function() {
return $(this).data('value') === item;
}).length === 0;
});
}
然后编写main_fn()循环调用srch()调用create_elment()返回的数组，如下所示：
function main_fn() {
if( tot_len <= glb_array_len ) {
console.log("count Data - " + tot_len + "-items");
srch().forEach(create_elment);
} else {
console.log("Invalid Data - " + tot_len + "-items");
}
}
为此，create_elment()需要接受一个参数，如下所示：
function create_elment(item) {
$("<div class='form-row' data-value=" + item + "><div class='form-group col-md-3 col-sm-12'><label class='ad_prd_lbl'>Option name</label><input type='text' class='form-control' placeholder='" + item + "' value='" + item + "' id=" + item + '_val' + "></div><div class='form-group col-md-8 col-sm-12'><label class='ad_prd_lbl'>Option values</label><input type='text' id=" + item + '_inp' +" class='form-control' placeholder='Separate options with a comma'></div><div class='form-group col-md-1 col-sm-12'><button class='but_all btn_rmv' type='button'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M16 6a1 1 0 1 1 0 2h-1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V8H4a1 1 0 1 1 0-2h12zM9 4a1 1 0 1 1 0-2h2a1 1 0 1 1 0 2H9zm2 12h2V8h-2v8zm-4 0h2V8H7v8z'></path></svg></button></div></div>").appendTo("#form-row_cst");
}
外部变量dataArrayCreated可以省略。
修改
要为每次点击#clone_btn添加一行，您可以保留srch()原样（我的版本），然后在main_fn()更改行...
srch().forEach(create_elment);
到...
srch().slice(0, 1).forEach(create_elment);
这样，srch()仍然会返回表示所有缺失行的项目数组，并且main_fn()可以控制它将对哪些行进行操作。
如果srch()返回空数组，则srch().slice(0, 1)也将为空数组，并且不会调用create_elment。除非您特别希望在日志中看到这些消息，否则可能不再需要进行if(tot_len <= glb_array_len)测试？