Question

我使用多个按钮添加文本就像表单一样，我想使用count来更改输入id或名称，但这不会反映在我的代码中。

如果我习惯于这个简单而不是它的工作，但是如果我习惯于字符串而不是它不工作。请告诉我我的代码在哪里错了。

$('#singleTextbtn').on('click', function() {
  singleLineText();
  console.log(count);
  return false;
});
var count = 0;

function singleLineText() {
  count++;
  var slt = count + "count+<li><div class='formSection'+count> <label for='singleLineText_'+count>Single Line Text </label><input type='text' value='' name='singleLineText_'+count id='singleLineText_'+count /><div class='actionSec'> <span class='addBtn' title='click here to add more'></span><span class='removeBtn' title='click here to remove'></span></div> </div> </li>";
  $('#rohit').append(slt);

};

#singleTextbtn {
  border: solid 1px red;
  padding: 5px 10px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<a href="#" id="singleTextbtn">click to add </a>

<ul id="rohit"></ul>

Answer 1

您的代码正确，但您只需编辑此行..

var slt =count+"count+<li><div class='formSection"+count+"'> <label for='singleLineText_"+count+"'>Single Line Text </label><input type='text' value='' name='singleLineText_"+count+"'  id='singleLineText_"+count+"' /><div class='actionSec'> <span class='addBtn' title='click here to add more'></span><span class='removeBtn' title='click here to remove'></span></div> </div> </li>";

祝你好运['}

Answer 2

我希望我能帮到你......

我认为你逃脱了你的“计数”错误：

Here是一个工作小提琴。

基本上你必须逃避所有类名中的“count”，依此类推：

e.g。 <div class='formSection"+count+"'>

Answer 3

试试这个：你使用count作为字符串。刚为count变量添加了适当的连接。

    $('#singleTextbtn').on('click', function() {
  singleLineText();
  console.log(count);
  return false;
});
var count = 0;

function singleLineText() {
  count++;
  var slt = count + "<li><div class='formSection_"+count+"'> <label for='singleLineText_"+count+"'>Single Line Text </label><input type='text' value='' name='singleLineText_"+count+"' id='singleLineText_"+count+"' /><div class='actionSec'> <span class='addBtn' title='click here to add more'></span><span class='removeBtn' title='click here to remove'></span></div> </div> </li>";
  $('#rohit').append(slt);

};

===========================

$('#singleTextbtn').on('click', function() {
  singleLineText();
  console.log(count);
  return false;
});
var count = 0;

function singleLineText() {
  count++;
  var slt = count + "<li><div class='formSection_"+count+"'> <label for='singleLineText_"+count+"'>Single Line Text </label><input type='text' value='' name='singleLineText_"+count+"' id='singleLineText_"+count+"' /><div class='actionSec'> <span class='addBtn' title='click here to add more'></span><span class='removeBtn' title='click here to remove'></span></div> </div> </li>";
  $('#rohit').append(slt);

};

#singleTextbtn {
  border: solid 1px red;
  padding: 5px 10px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<a href="#" id="singleTextbtn">click to add </a>


<ul id="rohit"></ul>

Answer 4

你应该关闭字符串并用+符号附加它：

function singleLineText() {
      count++;
      var slt = count + "count+<li><div class='formSection'"+count+"> <label for='singleLineText_'"+count+">Single Line Text </label><input type='text' value='' name='singleLineText_'"+count+" id='singleLineText_'"+count+" /><div class='actionSec'> <span class='addBtn' title='click here to add more'></span><span class='removeBtn' title='click here to remove'></span></div> </div> </li>";
      $('#rohit').append(slt);
};

Answer 5

确保您的字符串格式正确。要在字符串中使用变量，您有2个选项。

var myString = "count: "+count+" using double quotes"

var myString2 = 'count: '+count+' using single quotes'

Answer 6

按如下方式更新html。

 var slt = count + "count+<li><div class='formSection'+count> <label for='singleLineText_'+count>Single Line Text </label><input type='text' value='' name='singleLineText_"+count+"  id='singleLineText_"+count+"  /><div class='actionSec'> <span class='addBtn' title='click here to add more'></span><span class='removeBtn' title='click here to remove'></span></div> </div> </li>";

以下是plunker

如何在追加文字中使用计数

6 个答案: