Question

我正在尝试做一些循环练习并将蓝色样式应用于所有＆＃34;列出＆＃34;具有单击事件的类。除此之外，我还想打印＆＃34; i＆＃34;的价值。在每个循环中。任何人都可以指出代码中缺少的东西。谢谢这是我的代码：

＆＃13;

function changeClass(){
  
   for (i=0;i<3;i++) {
      var list =  document.getElementsByClassName("listing")[i];
      list.style.color = "blue";
      var values = document.getElementsByClassName("value");
      document.write(i);
   }
}

document.getElementById("change").addEventListener("click", changeClass);

＆＃13;

<ul id="groupList">
<li class="listing">First</li>
<li class="listing">First</li>
<li class="listing">First</li>
<li class="value"></li>
</ul>
<button id="change">change listing</button>

＆＃13;

Answer 1

您已经使用了document.write()函数，它可能会覆盖文档HTML内容，您可以使用console.log()方法来调试变量。还要在一个变量中使用元素引用，这样可以更快地执行。将class="value"更改为id="value"，因为它只有一个元素，因此标识符是好的而不是类。类引用多个元素，但id仅引用一个元素。

＆＃13;

function changeClass(){
   var dom=document.getElementsByClassName("listing");
   var all_index=[]
   for (i=0;i<dom.length;i++) {
      var list =  dom[i];
      list.style.color = "blue";
      all_index.push(i);
      
   }
   document.getElementById("value").innerHTML=all_index.join(",");
      
}

document.getElementById("change").addEventListener("click", changeClass);

＆＃13;

<ul id="groupList">
<li class="listing">First</li>
<li class="listing">First</li>
<li class="listing">First</li>
<li id="value"></li>
</ul>
<button id="change">change listing</button>

＆＃13;

Answer 2

你需要添加一个监听器来调用chageClass函数

document.getElementById("change").addEventListener('click',changeClass,true);

在这里，我要说明for循环问题的原因：

inside your for loop when i==0;

document.write（i）将 elimenate 文档中的所有元素，如果一切正常，将在您的文档中打印0。

when i==1 in for loop :

以下行将变为无效，因为没有元素持有“list”类。所有其他元素都从文档中删除。现在它将消除"0"表单文档并在文档中打印"1"只要for循环继续，它就会继续运行。

var list =  document.getElementsByClassName("listing")[i];

如果您要在文档中打印，请使用 document.body.innerHTML ：

   function changeClass(){

   for (i=0;i<3;i++) {
      var list =  document.getElementsByClassName("listing")[i];

      list.style.color = "blue";
      var values = document.getElementsByClassName("value");
     document.body.innerHTML+='<br>'+i+'<br>';
   }

}
  document.getElementById('change').addEventListener('click',changeClass,true);

变量＆＃34; i＆＃34;不在javascript for循环中显示

2 个答案: