javascript - 如何仅在指定div内通过标签名称选择元素

Question

我正在尝试制作一个简单的幻灯片来循环播放我的图像。我遇到的问题是当尝试使用 document.getElementById("image_wrapper").getElementsByTagName("img") 仅选择“image_wrapper”div 中的图像时 是它还从同级 div 中选择图像。我只想循环浏览 image_wrapper div 中的图像。

html onclick来电 addOne()单击右箭头时，takeOne()单击向左箭头时

var x = 0;

var hideImage = document.getElementsByClassName("profile_image");           
function displayOne() {
    for(i = 0; i < hideImage.length; i++) {
      if(i == 0) {
        hideImage[0].style.display = "inline-block";
      }
    }
}

function addOne() {
    var profileImg = document.getElementById("image_wrapper").getElementsByTagName("img");
    if(x < profileImg.length ) {
        x++; 
    } else {
      x = 0;
    }
    for(i = 0; i < profileImg.length ; i++) {
      if(x == profileImg.length) { x = 0;}
      if(x == i) {
          profileImg[i].style.display = "inline-block";
      } else {
        profileImg[i].style.display = "none";
      }
    }
}

function takeOne() {
    var profileImg = document.getElementById("image_wrapper").getElementsByTagName("img");
    if(x > 0 ) {
      x--; 
    } else {
      x += profileImg.length - 1 ;
    }
    for(i = 0; i < profileImg.length ; i++) {
      if(x == -1) { x = profileImg.length; }
      if(x == i) {
        profileImg[i].style.display = "inline-block";
      } else {
        profileImg[i].style.display = "none";
      }
    }
}

Answer 1

你尝试过吗？

document.querySelectorAll('#image_wrapper img');

document.querySelectorAll()和 document.querySelector()可以采用 css 选择器。