Question

1个用户单击“添加驱动程序”按钮
2个脚本检查是否已创建带有（name = driver1）的div。
3如果还没有：使用以下代码创建一个div，以创建一个名称为（name = driver1）
的div。 4如果具有（name = driver1），它将使用（name = driver2）创建另一个div，依此类推

基本上我希望它仅在所有输入名称上创建名称1到5 无论用户按下添加驱动程序或删除驱动程序按钮多少次。

使用下面的代码im可以实现这一点，但是，如果用户单击按钮5次，然后将其全部删除，然后单击5次以上，则我必须确保php邮件程序最多包含10个名称（名称=“ name10”）的每个输入，在业务方面看起来会很混乱。

我知道我需要更改ID来分类，这只是一个简单的例子。

现在我想我可以使用IF或Switch语句来检查是否创建了每个div。但是对JavaScript来说是新手，因此不确定在实现修改代码之前这是否是实现目标的最佳方法，甚至是可能的。

看来我可能有2个不同的脚本jquery和JavaScript？是否有仅使用JavaScript的简单方法？这是工作中的小提琴
https://jsfiddle.net/oyks8jb1/1/

var count = 0;
 $(document).on('click', '.aaa', function(){
       var html = '
/* delete all the whitespace and returns between ‘’ to get the code below to work I formatted it to make it easier to read*/.
<div id="formwrap2" class="test'+count+'" name="test'+count+'">
<div id="ddd">
<div id="driverinfo">Driver Info<button type="button" name="remove"  id="test2" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus">Remove Vechicle</span></button>
/* below is the only code that matters are input name=   */.
</div>
<div id="formwrap"><div id="ftx1">YEAR:</div>
<input type="text" name="year'+count+'" class="box" maxlength="40" min="9" max="40"placeholder=""/>
</div>

<div id="formwrap">
<div id="ftx1">MAKE:</div>
<input type="text" name="make'+count+'" class="box" maxlength="40" min="9" max="40"placeholder=""/>
</div>

<div id="formwrap">
<div id="ftx1">MODEL:</div>
<input type="text" name="model'+count+'" class="box" maxlength="40" min="9" max="40"placeholder=""/>
</div>

<div id="formwrap">
<div id="ftx1">manual or stick:</div>
<section class="plan cf">
<input type="radio" name="'+count+'mors" id="'+count+'manual" value="manual"><label class="free-label four col" for="'+count+'manual">manual</label>
<input type="radio" name="'+count+'mors" id="'+count+'stick" value="stick" checked><label class="basic-label four col" for="'+count+'stick">stick</label>
</section>
</div>

</div><br><br><br></div>';
       count++;
         $('#item_table1').append(html);
         
         
           $(document).on('click', '.remove', function(){
  $(this).closest('#formwrap2').remove();
 });
         
         
          });

#formwrap2{
  border:2px solid red;
  height:230px;
  width:250px;
}

<head>
<script src="scripts/modernizr-2.6.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>




<table class="table table-bordered" id="item_table1">
      <tr>
       <th><button type="button" name="aaa" id="test1" class="aaa"><span class="glyphicon glyphicon-plus">Click to Add Driver</span></button></th>
      </tr>
     </table>

使用JS

0 个答案: