javascript – getElementsByClassName不起作用,但是getElementById呢？

参见英文答案 > getElementsByClassName not working 2个
我写了一个脚本,它的目标是停止显示图像一和二,同时允许图像3保持显示并移动到它们的位置.当我使用div Id而不是div Classes时,它工作正常,但我更喜欢使用div类,所以我可以像这样对元素进行分组：

 function myFunction() {
     var y = document.getElementsByClassName("firstimage secondimage");
     if (y.style.display === 'none') {
           y.style.display = 'block';
     } else {
           y.style.display = 'none';
     }
 }

而不是这个(为了节省空间,我应该选择包含更多元素)：

 function myFunction() {
     var x = document.getElementById("firstimage");
     if (x.style.display === 'none') {
          x.style.display = 'block';
     } else {
          x.style.display = 'none';
     }

     var y = document.getElementById("secondimage");
     if (y.style.display === 'none') {
          y.style.display = 'block';
     } else {
          y.style.display = 'none';
     }
}

我认为只是将div id改为div类,#imagenumber改为.imagenumber(除了我上面描述的javascript的改变之外)会有效,但是当我这样做时脚本停止工作.我需要脚本以与我在下面粘贴的代码相同的方式运行,但是使用div类而不是div Id.请告诉我哪里出错了.

CSS：

#firstimage {
    width: 100px;
    height: 100px;
    padding: 0px 0;
    text-align: center;
    background-color: green;
    margin-top:20px;
    color: white;
}

#secondimage {
    width: 100px;
    height: 100px;
    padding: 0px 0;
    text-align: center;
    background-color: blue;
    margin-top:20px;
    color: white;
}

#thirdimage {
    width: 100px;
    height: 100px;
    padding: 0px 0;
    text-align: center;
    background-color: red;
    margin-top:20px;
    color: white;
}

HTML：


使用Javascript：

function myFunction() {
     var x = document.getElementById("firstimage");
     if (x.style.display === 'none') {
          x.style.display = 'block';
     } else {
          x.style.display = 'none';
     }

     var y = document.getElementById("secondimage");
     if (y.style.display === 'none') {
          y.style.display = 'block';
     } else {
          y.style.display = 'none';
     }
}


最佳答案
您应该使用getElementsByClassName()或querySelectorAll()来收集所有div.Klass(Klass是一个任意名称).以下代码段使用querySelectorAll()详细信息在源中进行了注释.
SNIPPET

function toggleDiv() {
  // Collect all .image into a NodeList
  var xs = document.querySelectorAll(".image");
  // Declare i and qty for "for" loop
  var i,qty = xs.length;
  // Use "for" loop to iterate through NodeList
  for (i = 0; i < qty; i++) {
    // If this div.image at index [i] is "none"...
    if (xs[i].style.display === 'none') {
      // then make it "block"... 
      xs[i].style.display = 'block';
    } else {
      // otherwise set display to "none"
      xs[i].style.display = 'none';
    }
  }
}
#firstimage {
  width: 100px;
  height: 100px;
  padding: 0px 0;
  text-align: center;
  background-color: green;
  margin-top: 20px;
  color: white;
}
#secondimage {
  width: 100px;
  height: 100px;
  padding: 0px 0;
  text-align: center;
  background-color: blue;
  margin-top: 20px;
  color: white;
}
#thirdimage {
  width: 100px;
  height: 100px;
  padding: 0px 0;
  text-align: center;
  background-color: red;
  margin-top: 20px;
  color: white;
}

在这个函数中,只需使用一个“类似数组”的对象,如上面Snippet中演示的NodeList.将以与Snippet中相同的方式使用数组.你是否想要对div进行更高级的处理,例如在每个div上运行一个函数并返回,然后将“类似数组”的对象转换为数组是运行map,forEach,slice等方法所必需的.

javascript – getElementsByClassName不起作用,但是getElementById呢？

猜你在找的HTML相关文章