querySelectorAll not working

本文关键字：working not querySelectorAll 更新时间：2023-09-26

我是javascript和我正试图用这两张照片制作一个模态图像。使用querySelectorAll选择类时遇到问题。如果我将querySelectorAll('.pics1([0]；

但它不适用于querySelectorAll('.pics'(；

使用document.getElementsByClassName会更好吗？

var modal= document.getElementById('myModal');
var image= document.querySelectorAll('.pics');
var modalpic= document.getElementById('img01');
image.addEventListener('click', function(){
   modal.style.display = "block";
    modalpic.src = this.src;  
});
var close= document.getElementById('close');
close.addEventListener('click', function(){
  modal.stlye.display="none";
});

.modal{
  display: none; 
    position: fixed; 
    z-index: 1;
    padding-top: 100px; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.9); 
  
}
.modalImage{
    margin: 0 auto;
    display: block;
    width: 95%;
    align:center;
}
.pics{
  cursor: pointer;
  width: 20%;
  display: block;
  transition: 0.4s;
  border-radius: 5px;
}
.pics:hover{
  opacity: 0.7;
}
#close{
  position: absolute;
    top: 15px;
    right: 10px;
    color: gold;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor:pointer;
}
#close:hover{
  opacity: 0.7;
}

<img class="pics" src="http://www.petakids.com/wp-content/uploads/2015/11/Baby-Bunny.jpg" />
    
<img class="pics" src="https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg"/>
  <div class="modal" id="myModal">
  <img class="modalImgage" id="img01">
   </img>
 <span id="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>
</div>

如果要单击多个按钮，请将按钮放在另一个元素中，并将eventListener添加到其中。当单击事件被触发时，它不仅会在包裹按钮的元素(.frame(上被触发，还会在您单击的按钮上被触发。为了获得您单击的实际按钮，请使用event.target属性。

var modal = document.getElementById('myModal');
var frame = document.getElementsByClassName('frame')[0];
var modalpic = document.getElementById('img01');
frame.addEventListener('click', function(e) {
  var clicked = e.target;
  if (clicked.className === 'pics') {
    modal.style.display = "block";
    modalpic.src = clicked.src;
  } else {
    return false;
  }
});

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
}
.modalImage {
  margin: 0 auto;
  display: block;
  width: 95%;
}
.pics {
  cursor: pointer;
  display: block;
  ;
  width: 20%;
  transition: 0.4s;
  border-radius: 5px;
}
.pics:hover {
  opacity: 0.7;
}
#close {
  position: absolute;
  top: 15px;
  right: 10px;
  color: gold;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
}
#close:hover {
  opacity: 0.7;
}
.frame {
  border: 3px solid blue;
}

<figure class='frame'>
  <img class="pics" src="http://www.petakids.com/wp-content/uploads/2015/11/Baby-Bunny.jpg" />
  <img class="pics" src="https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg" />
</figure>
<div class="modal" id="myModal">
  <img class="modalImgage" id="img01">
  <span id="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>
</div>

querySelectorAll(<something>)返回NodeList。。。有点像数组，因为它是一个项目的集合。这就是为什么添加[0](或[1]等(会得到一个元素的原因。相比之下，querySelector(<selector>)将只返回一个项目。查看MDN(Mozilla开发者网络(文档中的querySelectorAll和querySelector。

如果您试图获取单个元素，并且将querySelector与标识多个元素的类(例如class="pics"(一起使用，则querySelector将只返回第一个元素。因此，如果你真的想使用这样的类，你最好使用querySelectorAll('pics')[0]等。querySelector更容易与id一起使用，而不是与类一起使用，例如，如果你用id="picA"和id="picB"标识它们，则querySelector('picA')与querySelector('picB')。

您询问是否应该使用document.getElementsByClassName。我想这有点取决于你。然而，我发现上面两个方法(querySelector和querySelectorAll(非常强大，非常有用，因为你可以用各种方式使用它们，例如，用类、用id、用属性，以及所有这些的组合。。。比仅仅局限于一个类名强大得多。

请查看此代码：

<div id='div1'> 
  Content.. 
  <!-- content.. -->
  <br>
  <a id='close_btn'>click to Close</a>
</div>
<script type="text/javascript">
 document.getElementById('close_btn').addEventListener('click', function(){
               document.getElementById("div1").style.visibility = "hidden";
            });
</script>