Question

我有一个代码，其中有6 classes至item1的名称，这些类的ID为item6。.

i id's 1 to 6，其值在want to change the id of these classes中给出。.

我尝试过该代码

y [i] .id + = newids [i-1];

但这给了我错误未捕获的TypeError：无法读取未定义的属性“ id”。

如何使用数组中给定的newid将item1类的id更改为item6。.

我该如何实现？

array newids

var newids=[2,1,5,4,6,3]; console.log(newids); for(i=1;i<=6;i++) { var y="item"+i; x = document.getElementsByClassName(y); console.log(x); y[i].id += newids[i-1]; }

.item1{ border:2px solid black; float:left; position:fixed; width:5vw; height:5vh; } .item2{ border:2px solid black; float:left; width:5vw; height:5vh; margin-left:6%; } .item3{ border:2px solid black; float:left; width:5vw; height:5vh; margin-left:1%; } .item4{ border:2px solid black; float:left; width:5vw; height:5vh; margin-left:1%; } .item5{ border:2px solid black; float:left; width:5vw; height:5vh; margin-left:1%; } .item6{ border:2px solid black; float:left; width:5vw; height:5vh; margin-left:1%; } h2{ text-align:center; margin-top:0%;}

Answer 1

您几乎完全正确，只需更改两件事：

x = document.getElementsByClassName(y)返回一个HTMLCollection，因此您需要使用索引0获得该集合中的第一个元素：
x = document.getElementsByClassName(y)[0]。
将y.id += newids[i];更改为x.id = newids[i];，因为x是您要更改其id的元素，而不是字符串y。另外，要将ID设置（而不是追加），还需要使用单个等号（不包含+）。

请参阅下面的工作示例（检查元素以查看新的ID）：

var newids = [2, 1, 5, 4, 6, 3];

for (i = 1; i <= 6; i++) {
  var y = "item" + i;
  x = document.getElementsByClassName(y)[0];

  x.id = newids[i - 1];
}

.item1 {
  border: 2px solid black;
  float: left;
  position: fixed;
  width: 5vw;
  height: 5vh;
}

.item2 {
  border: 2px solid black;
  float: left;
  width: 5vw;
  height: 5vh;
  margin-left: 6%;
}

.item3 {
  border: 2px solid black;
  float: left;
  width: 5vw;
  height: 5vh;
  margin-left: 1%;
}

.item4 {
  border: 2px solid black;
  float: left;
  width: 5vw;
  height: 5vh;
  margin-left: 1%;
}

.item5 {
  border: 2px solid black;
  float: left;
  width: 5vw;
  height: 5vh;
  margin-left: 1%;
}

.item6 {
  border: 2px solid black;
  float: left;
  width: 5vw;
  height: 5vh;
  margin-left: 1%;
}

h2 {
  text-align: center;
  margin-top: 0%;
}

<div class="item1" id="1">
  <h2>1</h2>
</div>
<div class="item2" id="2">
  <h2>2</h2>
</div>
<div class="item3" id="3">
  <h2>3</h2>
</div>
<div class="item4" id="4">
  <h2>4</h2>
</div>
<div class="item5" id="5">
  <h2>5</h2>
</div>
<div class="item6" id="6">
  <h2>6</h2>
</div>

Answer 2

另一种选择：

var newids=[2,1,5,4,6,3];
for(i=1;i<=6;i++) {
  var y="item"+i;
  $("." + y).attr("id", newids[i-1]);
}

您根本不需要x = document.getElementsByClassName(y)，因为您已经有了要更新的类。

如何使用数组中给出的值更改类的ID

2 个答案: