Javascript、克隆、函数和更改 id 和名称，有什么想法吗？答案

【问题标题】：Javascript, cloning, function and changing id's and names, any Ideas?Javascript、克隆、函数和更改 id 和名称，有什么想法吗？
【发布时间】：2012-12-28 04:34:31
【问题描述】：

这是我的 Javascript：

<script>

        function disable()
        {
            document.getElementById("habits").disabled=true;
            document.getElementById("habits2").disabled=true;

            document.getElementById("exact").disabled=false;
        }
        function enable()
        {
            document.getElementById("habits").disabled=false;
            document.getElementById("habits2").disabled=false;

            document.getElementById("exact").disabled=true;
        }
        var counter =0;
        var i = 0;
        function duplicate() { 
            var original = document.getElementById('div');
            var clone = original.cloneNode(true); // "deep" clone

            i+=1;
            clone.id = "div" + i; // there can only be one element with an ID
            original.parentNode.appendChild(clone);

            document.getElementById('div' + i).getElementsByTagName('select').name += '_clone' + i;
            counter+=1;
        }

    </script>

这是我的 HTML 代码：

 <button id="button" onclick="duplicate()">Add List</button><br><br>
        <form id ="form" name="search" method="post" action="test.php">
            <div id="div">
                <div id="d">
                    <select name ="select" >
                        ...options...
                    </select>
                </div>

                Value:<input type="text" id ="exact">

                From: <input type="text" id="habits">
                To: <input type="text" id="habits2">

                <br>
                <input type="button" name="answer" value="Range" onclick="enable()"  >
                <input type="button" name="answer" value="Exact" onclick="disable()" >
            </div>
            <br><br>

            <input type="submit" name ="search" value="Submit">
        </form>

我的问题是，当我克隆div id=div 时，所有按钮都适用于原始按钮，甚至是克隆的按钮。另一件事是，当我单击提交按钮以从drop-down list(s) 获取选项时，但提交后，仅计算（克隆）最后一个下拉列表，但我只想要原始的。

这是我点击提交后的页面：

<?php
$item = $_POST["select"];
echo $item;
?>

我该如何解决这个问题？也就是说，更改id 的名称和使用克隆元素的函数？

【问题讨论】：

重点是，不能有两个元素具有相同的id。如果你这样做了，DOM 只会返回第一个元素。尝试使用form[name] 来访问表单元素。
怎么用？我两天前学了这种语言，所以我不知道如何使用它。

标签： php javascript html clone

【解决方案1】：

首先，如果您想复制内容，请不要使用 id。按类使用和选择（强烈推荐使用jQuery），使用name="some_name[]"

要解决您的问题，您可以这样做：onclick="javascript:enable(this)" 或者，如果您决定使用 jQuery，请使用 `onclick="javascript:jQuery(this)"，然后搜索当前元素的兄弟姐妹（不要知道纯 js 语法，只知道 jquery 一种，如果您需要 jquery 帮助，请告诉我）。

希望这会有所帮助，祝你好运。

【讨论】：

我没有 jQuery 的背景，虽然这里的大多数帖子都使用 jQuery 来解决这个问题。那么 enable(this)..什么是“this”的值？
this 将是父元素 - 在这种情况下，您添加了 onclick 的元素。例如<div onclick="alert(this);"></div> 会提醒实际的 div 元素本身。

【解决方案2】：

试试这个。我通过添加一行来更改功能

   function duplicate() { 
                var original = document.getElementById('div');
                var clone = original.cloneNode(true); // "deep" clone

                i+=1;
               clone.attr("id",replace(clone.attr("id"),"div"+i));// change the id of clone div
              //  clone.id = "div" + i; // there can only be one element with an ID
                original.parentNode.appendChild(clone);

                document.getElementById('div' + i).getElementsByTagName('select').name += '_clone' + i;
                counter+=1;
            }

【讨论】：