Question

基本上我想要完成的是一个添加div的按钮，每个div ID增加1.（IE＆＃39; rock0＆＃39;，＆＃39; rock1＆＃39;，＆＃39; rock2＆＃39;等。）

代码应该做的是添加带有ID＆＃39; rock＆＃39;的div，然后通过查找标记为＆＃39; rock＆＃39;并将其更改为＆＃39; rock0＆＃39;，＆＃39; rock1＆＃39;，＆＃39; rock2＆＃39;等。但是，现在它所做的只是添加具有相同ID的div而不更改它们

我对自动递增的工作方式有基本的了解，我似乎无法将其与添加新的div元素相结合。我几乎是积极的，这样做更容易，而不是我尝试的方式，但是我在搜索互联网后无法找到那种方式。

我的HTML：

<button onClick="addRock()" style="padding: 10px;">Add Rock</button>

我的Javascript：

var rocks = 1;
function addRock() {
    // This first line adds the new div with an ID of 'rock'
    document.getElementById('inventory').innerHTML += '<div class="item" id="rock" style="position: absolute; left: 10px;top: 10px;"> </div>';
    // These next few lines are supposed to go through and find any ID labeled 'rock'
    // and auto-increment each one by 1.
    var list = document.getElementById('rock');
    for (var i = 0; i < list.length; i++) {
    list[i].setAttribute("id", "rock" + i);
}
    rocks++;
    $('#rocks').html('Rocks: ' + rocks);
    $( drag );
}

非常感谢任何帮助！这也是我关于Stack Overflow的第一个问题，所以如果您需要更多信息或其他信息，请告诉我。

Answer 1

您在这里获得元素：

var list = document.getElementById('rock');

然后尝试将其视为数组：

list[i].setAttribute("id", "rock" + i);

根据代码中的说明和注释，听起来你有多个元素，相同id 。这是无效的标记，因此JavaScript在该标记上的行为将是未定义的。

但您可能不需要在此处使用相同id的元素。每个按钮点击添加一个新的摇滚，对吧？你有一个带有计数的全局变量。所以该函数可以只增加并添加新函数，不需要循环。像这样：

var rocks = 1;
function addRock() {
    // increment first or afterward, depending on what you want the id in the next line to be
    rocks++;

    // construct the id from the "rocks" variable
    document.getElementById('inventory').innerHTML +=
        '<div class="item" id="rock' + rocks + 
        '" style="position: absolute; left: 10px;top: 10px;"> </div>';

    // the rest of what you're doing
    $('#rocks').html('Rocks: ' + rocks);
    $(drag);
}

添加新元素时，请使用正确的id添加新元素。而不是添加具有重复id值的新元素，然后尝试更正它们。

使用Javascript添加增量Div

1 个答案: