Question

我需要一个帮助。我需要使用Javascript / Jquery动态添加输入字段名称属性。我每次都会点击WebClient client = new WebClient(); byte[] html = client.DownloadData(http://tempuri.com/temp.php); UTF8Encoding utf = new UTF8Encoding(); string res = utf.GetString(html); if(res == "OK") { //go to next page } else { //show error }按钮创建新字段，然后点击+按钮删除所需字段。我正在解释下面的代码。

function createNew(evt){
  $('#questionshowp1').append('<div class="form-group"><input name="questions1" id="questions1" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text"><div class="secondsec"><button type="button" class="btn btn-sm btn-success exp-add" style="line-height:12px;" onclick="createNew(this);"><i class="fa fa-plus" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-danger exp-minus" style="line-height:12px;" onclick="deleteNew(this)"><i class="fa fa-minus" aria-hidden="true"></i></button></div></div>');
  $(evt).css('display', 'none');
  $(evt).siblings("button.btn-danger").css('display', 'block');
}
function deleteNew(evnt){
  $(evnt).closest(".form-group").remove();
}

这里我使用<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="questionshowp" id="questionshowp1"> <div class="form-group"> <input name="questions0" id="questions0" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text"> <div class="secondsec"> <button type="button" class="btn btn-sm btn-success exp-add" style="line-height:12px;" onclick="createNew(this);"><i class="fa fa-plus" aria-hidden="true"></i></button> <button type="button" class="btn btn-sm btn-danger exp-minus" style="line-height:12px;display:none;" onclick="deleteNew(this)"><i class="fa fa-minus" aria-hidden="true"></i></button> </div> </div> </div>按钮创建新字段，这里我需要增加名称属性值，如+ this.Suppose用户删除任何字段，然后这个给定的顺序将保留所有字段为name属性value。请帮帮我。

Answer 1

首先，你的方法非常糟糕。将所有内容放在长字符串中并将其放在JS中的某个位置并不是一个好主意。但是，这不是你的问题。

只需在脚本中创建一个新变量进行计数。

var count = 0;

然后增加createNew函数中的计数，并将值放在元素字符串中的所需位置。

++count;
'<input name="questions' + count + '" id="questions' + count + '"'

就是这样。

Answer 2

看一下附件摘录。

function createNew(evt){
  var cur=$("input:text").length+1;
  
     $('#questionshowp1').append('<div class="form-group"><input name="questions'+cur+'" id="questions1" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text"><div class="secondsec"><button type="button" class="btn btn-sm btn-success exp-add" style="line-height:12px;" onclick="createNew(this);">+<i class="fa fa-plus" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-danger exp-minus" style="line-height:12px;" onclick="deleteNew(this)">-<i class="fa fa-minus" aria-hidden="true"></i></button></div></div>');
     $(evt).css('display', 'none');
     $(evt).siblings("button.btn-danger").css('display', 'block');
  var i=0;
   $('input[type="text"]').each(function(){
      $(this).attr('name', 'questions' + i); 
      $(this).attr('id', 'questions' + i); 
     i++;
  });
}
function deleteNew(evnt){
     $(evnt).closest(".form-group").remove();
   var i=0;
   $('input[type="text"]').each(function(){
      $(this).attr('name', 'questions' + i); 
      $(this).attr('id', 'questions' + i); 
     i++;
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questionshowp" id="questionshowp1">
<div class="form-group">
<input name="questions0" id="questions0" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text">
<div class="secondsec">
<button type="button" class="btn btn-sm btn-success exp-add" style="line-height:12px;" onclick="createNew(this);">+<i class="fa fa-plus" aria-hidden="true"></i></button>
<button type="button" class="btn btn-sm btn-danger exp-minus" style="line-height:12px;display:none;" onclick="deleteNew(this)">-<i class="fa fa-minus" aria-hidden="true"></i></button>
</div>                                                            
 </div>
 </div>

Answer 3

您只需count次点击次数即可并在脚本中使用该计数以具有唯一的名称属性。

<script type="text/javascript">
        var clicks = 0;
        function createNew() {
            clicks += 1;
            var ques = "questions" + clicks;
             $('#questionshowp1').append('<div class="form-group"><input name='+ques+'  id="questions1" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text"><div class="secondsec"><button type="button" class="btn btn-sm btn-success exp-add" style="line-height:12px;" onclick="createNew(this);"><i class="fa fa-plus" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-danger exp-minus" style="line-height:12px;" onclick="deleteNew(this)"><i class="fa fa-minus" aria-hidden="true"></i></button></div></div>');
     $(evt).css('display', 'none');
     $(evt).siblings("button.btn-danger").css('display', 'block');
        };
        </script>

Answer 4

在脚本中创建全局变量 idCount ，并在createNew函数中增加其值。

＆＃13;

var idCount = 0;
function createNew(evt){
  idCount++;
     $('#questionshowp1').append('<div class="form-group"><input name="questions'+idCount+'" id="questions1" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text"><div class="secondsec"><button type="button" class="btn btn-sm btn-success exp-add" style="line-height:12px;" onclick="createNew(this);">+<i class="fa fa-plus" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-danger exp-minus" style="line-height:12px;" onclick="deleteNew(this)">-<i class="fa fa-minus" aria-hidden="true"></i></button></div></div>');
     $(evt).css('display', 'none');
     $(evt).siblings("button.btn-danger").css('display', 'block');
}
function deleteNew(evnt){
     $(evnt).closest(".form-group").remove();
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questionshowp" id="questionshowp1">
<div class="form-group">
<input name="questions0" id="questions0" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text">
<div class="secondsec">
<button type="button" class="btn btn-sm btn-success exp-add" style="line-height:12px;" onclick="createNew(this);">+<i class="fa fa-plus" aria-hidden="true"></i></button>
<button type="button" class="btn btn-sm btn-danger exp-minus" style="line-height:12px;display:none;" onclick="deleteNew(this)">-<i class="fa fa-minus" aria-hidden="true"></i></button>
</div>                                                            
 </div>
 </div>

＆＃13;

如何使用Javascript / Jquery动态添加输入字段的name属性

4 个答案: