0

我有一个 html 文件，其中包含一个包含字段的表。有些字段用xxx标记，应该转换为textareas。这已成功完成为：

function raplace() {

    var replaced = $("body").html().replace(/xxx/g,'<textarea class="textarea" id=0 style="width: 100%; height: 100%; min-height:3em; box-sizing: border-box; resize: none; border:none"></textarea>');

    $('body').html(replaced);
}

现在的任务是分配一个 name 属性，该属性应该用于第一个 textarea name="text1"，用于第二个区域name="text2"，依此类推。为了实现这一点，我特意id=0为所有文本区域设置，正如您从上面的代码中看到的那样。我试图通过使用以下代码来实现目标：

var i=1;
    while (document.getElementById('0')) {

        //$('#0')[0].name = 'text'+i;
        //$('#0')[0].id = i;

        document.getElementById("0").name = "text" + i;
        document.getElementById("0").id = i;

        //document.getElementById("0").setAttribute("name","text"+i);
        //document.getElementById("0").setAttribute("id",i);
        i++;

您可能知道，上面的所有三个代码都在工作并且做同样的事情。然而，大问题来了。

当我将代码放入浏览器控制台时，它按预期运行，完美地更改了 name 和 id 属性。但是，如果将代码放入我的文件中，它只会生成文本区域，设置所有 id=0。不执行脚本的第二部分（更改属性值）。我已经在网上找了很多天了，并在堆栈溢出时求助于这里。如果有人能帮助我，那就太棒了。谢谢！！！

注意：第一部分需要首先执行，否则您将没有要定位的 id。

编辑：稍微清理一下代码后，这就是我所拥有的。如果有人知道为什么第二部分没有执行，请告诉我。谢谢！

function raplace() {

    var replaced = $("body").html().replace(/xxx/g,'<textarea class="replacement" style="width: 100%; height: 100%; min-height:3em; box-sizing: border-box; resize: none; border:none"></textarea>');

    var replacements = document.getElementsByClassName('replacement');
    var txtArea;

    for (var i = 0; i < replacements.length; i++) {
        txtArea = replacements[i];
        txtArea.id = "text" + i;
        txtArea.name = "text" + i;
    }

$('body').html(replaced);
}
4

1 回答 1

1

这里有一些不好的做法可能会影响您的解决方案：

  1. 您的 ID 不以字母开头。请参阅：HTML 中 id 属性的有效值是什么？

  2. 您有多个具有相同 ID 的元素。

一个建议是使用一个类来定位您的元素，例如

'<textarea class="textarea replacement"' // etc

然后..

var replacements = document.getElementsByClassName('replacement'),
    txtArea;

for (var i = 0; i < replacements.length; i++) {
    txtArea = replacements[i];
    txtArea.id = "text" + i;
    txtArea.name = "text" + i;
}
于 2013-06-10T17:29:59.567 回答