Question

由于David Carr - Duplicate form sections with jQuery

，我能够成功克隆并删除表单的某些部分

现在，我一直在尝试更改两个R[P1->P2] = conjugate(R[G->I1]) * R[G->I2] * RotateZ(180°) ID（div＆amp; #ifYes）#ifNo，以便每次表单都为其提供唯一ID克隆，我添加了两行编码来改变div ID，但这并没有真正起作用。

我的代码如下：

HTML ：

hidden

的JavaScript ：

<div id="content">
  <button type="button" id="cross" class="buttonImgTop cross"></button>
   <div id="ValuWrapper">
      <div id="ifYes"> .. </div>
      <div id="ifNo">  .. </div>
   </div>
</div>

<button type="button" class="buttonImg" id="repeat"></button>

感谢您的帮助。

Answer 1

这是小提琴：https://jsfiddle.net/zh7wejzb/

这是工作示例。请看一下：

    <!DOCTYPE html>
<html>

<head>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <meta charset="utf-8">
    <title>Test</title>
    <meta name="description" content="Fullscreen backgrounds with centered content">
</head>

<body>
    <div id="content">
        <button type="button" class="buttonImgTop cross">Cross</button>
        <div id="ValuWrapper">
            <div id="ifYes" class="yes"> .. </div>
            <div id="ifNo" class="no"> .. </div>
        </div>
    </div>
    <button type="button" class="buttonImg" id="repeat">Repeat</button>
    <script type="text/javascript">
    //define template
    var template = $('#content:first');


    //define counter
    var count = 0;

    //add new section
    $('body').on('click', '#repeat', function() {

        //increment
        count++;

        //remove cross button div
        var clone = template.clone()
            .appendTo('#content').hide()
            .slideDown(500);

        //update id of ifYes & ifNo
        clone.find('.yes').prop("id", "ifYes" + count);
        clone.find('.no').prop("id", "ifNo" + count);

        //loop through each input
        clone.find(':input').each(function() {

            //set id to store the updated section number
            var newId = this.id + count;

            //update id
            this.id = newId;

        }).end()


        return false;
    });

    //remove section
    $('#content').on('click', '.cross', function() {
        //slide up section
        $(this).parent().slideUp(500, function() {
            //remove parent element (main section)
            $(this).empty();
            return false;
        });
        return false;
    });
    </script>
</body>

</html>

Answer 2

<html>
  <head>
    <title>Change Html Div ID Using jQuery</title>
 </head>
 <body>
    <div id="ChangeID"></div>
</html>

<script src="jQuery CDN"></script>
$(document).ready(function(){        
$('#ChangeID').attr('id', 'NewID')      
});
 <script>   

</body>
</html>

Answer 3

我必须经常这样做。我所做的可能并不理想，但它有效。我这样做......

function getRandomInt(000000, 999999) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

var uniqueScriptID = “anythingStartingLowercase” + getRandomInt();

然后将整个脚本连接到一个变量中，但是在脚本中按字面写入ID，将其替换为uniqueScriptID变量。

然后，您可以使用该变量尽可能多地删除这些表单，所有表单都具有唯一ID。

希望有所帮助。该代码根本没有经过测试。

使用jQuery更改div中的div id

3 个答案: