0

我正在使用一个简单的 JS 复制函数来复制一个 div。里面是带有单选按钮的表单信息，包括一组称为“getOrRequest”的组。每个 div 代表一本书，需要有自己的“getOrRequest”值。

需要更改名称以使每个重复的单选按钮组都可以选择，而不会影响其他所有单选按钮。更改这些值的最佳方法是什么？

这是我复制 div 的方式，以防万一。

var bookInfo = document.getElementById('bookInformation');
var copyDiv = document.getElementById('addListing').cloneNode(true);
bookInfo.appendChild(copyDiv);

然后，我尝试了几种更改名称值的方法。像这样：

bookInfo.copyDiv.getOrRequest_0.setAttribute("name", "'getOrRequest' + idNumber + '[]'");
bookInfo.copyDiv.getOrRequest_1.setAttribute("name", "'getOrRequest' + idNumber + '[]'");

还有这个：

bookInfo.copyDiv.getOrRequest_0.name = 'getOrRequest' + idNumber + '[]';
bookInfo.copyDiv.getOrRequest_1.name = 'getOrRequest' + idNumber + '[]';

getOrRequest_0 和 getOrRequest_1 是输入值的 ID，但我现在已经尝试了几种方法，但似乎没有任何效果。提前致谢！

编辑：更多信息

这是我正在使用的特定代码：

function addAnotherPost(){

var bookInfo = document.getElementById('bookInformation');
var copyDiv = document.getElementById('addListing').cloneNode(true);
var size = copyDiv.childNodes.length;

copyDiv.id = 'addListing' + idNumber;

for(var j = 0; j < size; j++){
   if(copyDiv.childNodes[j].name === "getOrRequest[]"){
      copyDiv.childNodes[j].name = "getOrRequest" + idNumber + "[]";
   }
}

bookInfo.appendChild(copyDiv);

idNumber++;
}

而且它似乎不起作用.. div 重复，但名称值没有改变。

4

2 回答 2

0

你可以试试这个 - http://jsfiddle.net/ZKHF3/

    <div id="bookInformation">
        <div id="addListing">
            <input type="radio" name="addListing0[]" />
            <input type="radio" name="addListing0[]" />
        </div>
    </div>
    <button id="button">Add Listing</button>

    <script>
    document.getElementById("button").addEventListener("click", AddListing, false);

    var i = 1;
    var bookInfo = document.getElementById('bookInformation');

    function AddListing() {
        var copyDiv = document.getElementById('addListing').cloneNode(true);
        var size    = copyDiv.childNodes.length;

        copyDiv.id = "listing" + i;
        for ( var j = 0; j < size; j++ ) {
            if ( copyDiv.childNodes[j].nodeName.toLowerCase() == 'input' ) {
                copyDiv.childNodes[j].name = "addListing" + i + "[]";
            }
        }

        bookInfo.appendChild(copyDiv);
        i++;
    }
    </script>
于 2012-07-11T18:39:28.443 回答
0

问题是您正在寻找 div 的子节点，但复选框不是子节点，它们是后代节点。您要查找的节点嵌套在标签中。使用以下命令更新您的代码以查找所有后代输入copyDiv.getElementsByTagName("input")：

var idNumber = 0;
function addAnotherPost() {
    var bookInfo = document.getElementById('bookInformation');
    var copyDiv = document.getElementById('addListing').cloneNode(true);
    copyDiv.id = 'addListing' + idNumber;

    var inputs = copyDiv.getElementsByTagName("input");
    for(var j = 0; j < inputs.length; j++){
       if(inputs[j].name === "getOrRequest[]"){
          inputs[j].name = "getOrRequest" + idNumber + "[]";
       }
    }

    bookInfo.appendChild(copyDiv);
    idNumber++;
}

http://jsfiddle.net/gilly3/U5nsa/

于 2012-07-11T18:11:16.507 回答