Question

我正在创建一个html，它会创建一个div并通过单击按钮将输入中的内容复制到该div。

像这样：

HTML

<input type="text">
<button>Copy</button>
<p></p>

脚本

$('button').click(function() {
   var div = document.createElement('div');
   $('p').append(div);
   $('div').html($('input').val());
});

完美无缺

然后我加入了课程。

看起来像这样：

$('button').click(function() {
   var div = document.createElement('div');
   div.className = "Someclass";
   $('p').append(div);
   $('div').html($('input').val());
});

它运作良好。但是当我点击按钮时，它会将文本复制到所有div而不是单个

如何创建一个按钮，创建具有不同类别的不同div，并将文本从<input>复制到新创建的div

我在网上发现我可以在javascript中使用i++这个东西用于不同的类。
但该代码无法正常工作。请告诉我这里的错误。

我的代码如下所示：

$('button').click(function() {
   var i = 0;
   var div = document.createElement('div');
   div.className = "Someclass" + i++;
   $('p').append(div);
   $('div').html($('input').val());
});

Answer 1

你可以这样做：

var clickCount = 0;

$('button').click(function() {
  var html = $('input').val();
  var classname = 'someclass' + clickCount++;
  $('<div>').addClass(classname).html(html).appendTo('p');
});

Answer 2

而是使用.addClass jquery方法：

$( "div name" ).addClass( "yourClass" );

Answer 3

从点击事件中取出htmlspecialchars()
选择具有相应类名i

像这样更改你的代码：

.Someclass[i]

Answer 4

您正在将html附加到所有var i = 0; $('button').click(function() { var div = document.createElement('div'); div.className = "Someclass" + i; $('p').append(div); $('.Someclass' + i).html($('input').val()); i++; });目前。这是在添加内容之前添加内容

＆＃13;

div

＆＃13;

var  i=0;
$('button').click(function() {
   var div = document.createElement('div');
   div.className = "Someclass" + i++;
   $(div).html($('input').val());
  $('p').append($(div));
});

＆＃13;

Answer 5

这样做是因为你有这条线

 $('div').html($('input').val());

您可以将其更改为

 $('p div').html($+'input').val());

Answer 6

你应该给出精确的类名，比如'Someclass'+ i，“i”是你添加的类的最后一个索引。

$('button').click(function() {
   var i = 0;
   var div = document.createElement('div');
   div.className = "Someclass" + i++;
   $('p').append(div);
   $('Someclass'+i).html($('input').val());
});

您的代码看起来只会通过点击添加一个div，并且div将被赋予输入值。

如何在按钮点击时创建不同类的div？

6 个答案: