为克隆的元素提供唯一的ID

我有可拖动的项目可以克隆。我希望每个克隆都是独一无二的，这样每个克隆都可以插入到我们的数据库中（带有坐标，稍后会完成）。为克隆的元素提供唯一的ID

$(document).ready(function() { 
    cntb1 = 0; 
    cntb2 = 0; 
    cntb3 = 0; 
$(".droppable").droppable({ 
    accept: '#b1, #b2, #b3',   
     drop: function(event, ui) { 
     if(ui.draggable.attr('id')=='b1'){ 
       cntb1++; //counts clones 
       $(this).append($(ui.helper).clone());    
       $(".droppable .drag").addClass("component"); 
       $(".component").removeClass("drag"); 
       $(".component").resizable({aspectRatio: 'true' }).parent().draggable({ //parent() -> both draggable & resizable work 
         containment: '.droppable', //cursor: 'move', grid: [3,3]       
       }).attr('id', 'b1c'+cntb1); //change id 
       $("#status1").append('b1c'+cntb1); 
      } 
     else if(ui.draggable.attr('id')=='b2'){ 
       cntb2++; //counts clones 
       $(this).append($(ui.helper).clone());    
       $(".droppable .drag").addClass("component"); 
       $(".component").removeClass("drag"); 
       $(".component").resizable({aspectRatio: 'true' }).parent().draggable({ //parent() -> both draggable & resizable work 
         containment: '.droppable', //cursor: 'move', grid: [3,3]       
       }).attr('id', 'b2c'+cntb2); //change id 
       $("#status2").append('b2c'+cntb2); 
      } 
     else if(ui.draggable.attr('id')=='b3'){ 
       cntb3++; //counts clones 
       $(this).append($(ui.helper).clone());    
       $(".droppable .drag").addClass("component"); 
       $(".component").removeClass("drag"); 
       $(".component").resizable({aspectRatio: 'true' }).parent().draggable({ //parent() -> both draggable & resizable work 
         containment: '.droppable', //cursor: 'move', grid: [3,3]       
       }).attr('id', 'b3c'+cntb3); //change id 
       $("#status3").append('b3c'+cntb3); 
      } 

    } 
}); 

$(".drag").draggable({ 
      helper:'clone', 
      appendTo: 'body', //para maka drag padung gawas sa accordion 
      cursor: 'move' 
      }); 
$("#accordion").accordion({     
      autoHeight: false,     
      collapsible: true, 
      active: false 
}); 
});

但问题是，无论何时我创建一个新的克隆，旧的克隆的ID将被替换为新的克隆的ID。我的造型ID的这样测试它：

 #b1c3{ background:#00FF00; } 
     #b1c2{ background:#CCFF00; }

我的HTML是这样的BTW：

<div id="accordion"> 
<h3><a href="#">Buttons</a></h3> 
    <div class="div-table">   
     <div class="div-table-row"> 
     <div class="div-table-col"><img src="button_final/button_1.gif" id="b1" class="drag"/></div> 
     <div class="div-table-col"><img src="button_final/button_2.gif" id="b2" class="drag"/></div> 
     <div class="div-table-col"><img src="button_final/button_3.gif" id="b3" class="drag"/></div> 
     </div> 
      </div> 
</div> 
<div id="frame" style="border:dotted; height:500px; width:60%; float:left" class="droppable"> 
<h3 id="status1" style="height:30%;"></h3> 
<h3 id="status2" style="height:30%;"></h3> 
<h3 id="status3" style="height:30%;"></h3></div>

PS。我在这里的人们的帮助下组装了一切。我欠你一辈子！

来源

2012-01-03 chaypotato

您滥用ID的概念，正确使用CSS – Raynos 2012-01-03 16:29:11

@Raynos我该怎么做，先生？ – chaypotato 2012-01-03 16:58:31

这应该肯定的工作，改变，就是你必须在其追加到可投放的时间分配一个ID，以前ü被所有与组件类要素分配的ID这是不对的，你的情况。所以唯一的变化是：

$(this).append($(ui.helper).clone().attr("id",'b1c'+cntb1));

来源

2012-01-03 18:44:00

谢谢先生。它有帮助。我只是用这个id来涂抹东西。 :) – chaypotato 2012-01-04 06:43:45

干杯队友，不要忘记投票了答案。 – 2012-01-04 06:57:01

您正在选择类别为$(".component")的所有内容，而不仅仅是新添加/克隆的元素。

您需要将其限制为仅限于此。

一两件事你可以做的是，而不是追加elemtn并找到它，你可以参考存储它

//$(this).append($(ui.helper).clone()); 
var newClone = $(ui.helper).clone(); 
$(this).append(newClone); 
//than you can manipulate newClone to add/remove classes. Use find(), etc

来源

2012-01-03 16:15:14 epascarello

你的意思是替换这个 $（“。droppable .drag”）。addClass（“component”）; （“。component”）。removeClass（“drag”）; to this $（“。droppable .drag”）。addClass（“component”）; $（“＃myid”）。removeClass（“drag”）; ？我希望他们拥有相同的类别但不同的ID – chaypotato 2012-01-03 16:17:39

但是，如果页面上带有.component的元素不止一个，那么您将选择多个元素。 – epascarello 2012-01-03 16:31:12

ahk im这么弱。哈哈。但不会因为它始终是克隆的“newClone”而具有相同的效果？我很困惑。所以对不起，我是一个小菜鸟。 – chaypotato 2012-01-03 16:32:47

来解决，这将是在克隆元素不使用IDS的最佳方式，只使用类名。如果需要，您可以在一个父对象上使用一个id，但将id保留在实际克隆的内容中将使您无需修复克隆元素中的id。

如果您向我们展示了您正在克隆的实际HTML，那么我们可以进一步修复该ID，以便我们知道需要修复的id值。

来源

2012-01-03 16:21:17 jfriend00

我避免像瘟疫一样的ID。任何你可能想过重复使用的东西都不应该有一个ID – 2012-01-03 16:23:04

（抱歉，但是我理解起来有点慢），那是我的整个代码。 O_O，所以当没有用不同的类进行克隆时，没有办法添加唯一的ID？ – chaypotato 2012-01-03 16:27:38

这是你的整个HTML？在你提供的HTML中，我没有看到任何带有“”组件“类的东西，我不知道你在克隆什么HTML，并且需要修改ID。如果我知道确切的您正在克隆的HTML以及ID的位置，可以修复它们，但是不知道，没有自动的方法来完成它。 – jfriend00 2012-01-03 17:17:17

这是您的问题的解决方案，解决方案是在调整大小之前将id分配给组件。

$(".component").removeClass("drag").attr('id', 'b1c'+cntb1); 
        $(".component").resizable({aspectRatio: 'true' }).parent().draggable({ //parent() -> both draggable & resizable work 
          containment: '.droppable', //cursor: 'move', grid: [3,3]       
        });

来源

2012-01-03 16:27:50

它仍然覆盖旧的ID与新的。 :( – chaypotato 2012-01-03 16:41:13

新增了一个新答案，所以请检查一下:-) – 2012-01-03 18:44:40

感谢大家的帮助！我很困惑，我首先想做的是什么。但无论如何，如果别人要做到这一点，这可能帮助：

$(".droppable .drag").addClass("component").attr('id', 'b1c'+cntb1); /*basin if ako e change ang id diri */

$("#b1c"+cntb1).removeClass("drag"); //nya ang id name ako e call instead na ang class

$("#b1c"+cntb1).resizable({aspectRatio: 'true' }).parent().draggable({ containment: '.droppable' });

这为我工作。感谢@ Mehul Hingu的想法。 :)

来源

2012-01-04 06:49:04 chaypotato

为克隆的元素提供唯一的ID

回答

相关问题