Javascript 附加和操作元素

请查看我的测试站点

脚本是在

中编写的，因此您可以在那里看到它

说明

如果单击蓝色区域，将生成一个新元素。这样做四五次。现在单击刚刚创建的所有元素。它们都应该有一个黑色的轮廓。然而，有些人这样做，有些人不这样做

其他信息：

目前只在铬上进行了测试

---

有什么想法吗？

每次创建一个新的气泡时，您都会将“单击侦听器”添加到所有气泡中

将侦听器与侦听器一起添加一次。可以在创建任何气泡之前进行设置

不要使用数字

id

属性，HTML不允许使用

---

另外，您正在切换

活动类--

有一个较短的函数--

您可以简化使用：

$(function () {
  // CREATE A NEW BUBBLE

  $('.drop').click(function(event){
    Bubble(event);
  });

  var newBubbleId = 0;
  function Bubble(event,bubbleClass){
    // Create Element
    var id = newBubbleId++;
    var bubble = $('<div class="bubble" id="b_'+id+'" draggable="true"><input id="bubbleText" type="text" name="text" value="'+id+'" /></div>');
    $('body').append(bubble);

    // Position Element
    var bubbleWidth = bubble.width();
    var bubbleHeight = bubble.height();
    var x = event.pageX - (bubbleWidth*0.5);
    var y = event.pageY - (bubbleHeight*0.5);
    bubble.offset({top:y, left:x});
    bubble.click(function () {
      $(this).toggleClass("active");
    });
  }

});

$（函数（）{
//创造一个新的泡沫
$（'.drop'）。单击（函数（事件）{
泡沫（事件）；
});
var newubbleid=0；
函数气泡（事件，气泡类）{
//创建元素
var id=newubbleid++；
var泡泡=$（''）；
$（'body'）。追加（气泡）；
//位置元素
var bubbleWidth=bubble.width（）；
var bubbleLight=bubble.height（）；
var x=event.pageX-（气泡宽度*0.5）；
变量y=event.pageY-（气泡灯*0.5）；
偏移量（{top:y，left:x}）；
气泡。单击（函数（）{
$（此）.toggleClass（“活动”）；
});
}
});

我看到了一些其他问题。如前所述对ID进行编号。此外，所有输入元素都具有相同的ID，这是不允许的。每个文档只有一个ID。如果希望它们具有相同的名称，则可以使用“名称”属性

另外，您的计数器功能也不理想

---

但这应该可以解决您的问题。

根据创建的气泡的数量，它只将类添加到偶数或奇数气泡中。查看源代码，我认为这与在删除类之前没有设置

活动类有关。谢谢，这是一个非常有效且简单的解决方案。我知道，我的代码在这一点上真的很草率，我会整理一下。