为克隆元素提供唯一ID

时间:2012-01-03 15:53:55

标签: javascript html jquery-ui

我有可以克隆的可拖动项目。我希望每个克隆都是唯一的,因此每个克隆都可以插入到我们的数据库中(带坐标,稍后会完成)。

 $(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。我在这里的人们的帮助下组装了一切。我欠你我的生命!

5 个答案:

答案 0 :(得分:2)

解决这个问题的最好方法是不在克隆元素中使用id,只使用类名。如果需要,可以在一个父对象上使用id,但是将id保留在实际克隆的东西之外将使您不必修复克隆元素中的ID。

如果您向我们展示了您正在克隆的实际HTML,我们可以帮助您进一步修复ID,以便我们知道需要修复哪些ID值。

答案 1 :(得分:2)

这应该可以肯定,更改是你必须在将它附加到droppable时分配一个id,之前你正在为所有带有组件类的元素分配id,这在你的情况下是错误的。 所以唯一的变化是:

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

答案 2 :(得分:0)

您正在使用类$(".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

答案 3 :(得分:0)

以下是您的问题的解决方案,解决方案是在将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]                        
                    }); 

答案 4 :(得分:0)

感谢大家的帮助!我很困惑我最初想做什么。但无论如何,如果其他人想要这样做,这可能会有所帮助:

$(".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的想法。 :)