Question

在我的php while循环中，我输出一个id为divborder的div和class div-border 在div里面我有另一个id为id的div

<div id='divborder' class='div-border'>
  <div id='Title'>This is Title</div> <br/> video elements
</div>

我有一个在视频结束时调用的JavaScript函数

for (var i = 0; i < videos.length; i++) {
  videos[i].addEventListener("ended", function(event) 
  {
     var divBoader2 = document.getElementsByClassName("divborder")[3];
     divBoader2.style.borderColor = "#b1ff99";
  }

我的问题是如何更改div的边框颜色和第二个div的标题？

我可以这样做：

var divBoader2 = document.getElementsByClassName("divborder")[3];
divBoader2.style.borderColor = "#b1ff99";

哪个有效，但不是动态的

Answer 1

试试这个，

提供班级名称div-border而非divborder

for (var i = 0; i < videos.length; i++) {
 videos[i].addEventListener("ended", function(event) 
 {
    var divBoader2 = document.getElementsByClassName("div-border")[3];
    divBoader2.style.borderColor = "#b1ff99";
 }

Answer 2

将i处的值保存在使用let

声明的另一个变量中

for (var i = 0; i < videos.length; i++) {
  let index = i; //save the value as let so that its binding stays
  videos[i].addEventListener("ended", function(event) 
  {
     var divBoader = document.querySelectorAll("div-border")[index];
     divBoader.style.borderColor = "#b1ff99";
  }
}

如果视频元素位于div-border范围内，请使用closest

for (var i = 0; i < videos.length; i++) {
  videos[i].addEventListener("ended", function(event) 
  {
     var divBoader = event.currentTarget.closest(".div-border");
     divBoader.style.borderColor = "#b1ff99";
  }
}

稍微冗长的代码

[...videos].forEach( s => s.closest( ".div-border" ).style.color = "#b1ff99" )

Answer 3

您需要的可能是videos[i].parentNode而不是document.getElementsByClassName("div-border")[3]（请参阅https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode）

如何在for语句中更改Div的颜色？

3 个答案: