Question

我是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>

Answer 1

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

如果您尝试获取单个元素并且使用querySelector一个标识多个元素的类（例如class="pics"），则querySelector将返回第一。因此，如果你确实想要使用这样的类，那么最好使用querySelectorAll('pics')[0]等等。querySelector更容易使用id而不是类，例如如果您使用querySelector('picA')和querySelector('picB')标识了id="picA"，则会id="picB"与document.getElementsByClassName。

您问是否应该使用querySelector。我想这取决于你。但是，我发现上述两种方法（querySelectorAll和localhost:8000）非常强大且非常有用，因为您可以通过多种方式使用它们，例如与类，id，具有属性，以及所有这些的组合......比仅限于类名更强大。

Answer 2

如果要单击多个按钮，请将按钮放在另一个元素中，然后将eventListener添加到该元素中。触发click事件时，不仅会触发包含按钮的元素（.frame），还会触发您单击的按钮。要获取您单击的实际按钮，请使用event.target属性。

＆＃13;

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;
  }
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 3

请查看此代码：

<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>

Answer 4

我也遇到使querySelectorAll正常工作的问题。根据{{3}}，我可以使用命令搜索表格的单元格

document.getElementById('myTable').querySelectorAll('tbody td')

我的表结构是

<table>
    <thead><tr><td>Header</td></tr></thead>
    <tbody><tr><td>Body</td></tr></tbody>
</table>

标头和主体单元格均为td。上面的脚本返回thead和tbody中的所有单元格。难道我做错了什么？下面的代码可以完成工作，但是问题是我看不到以上版本的代码有什么问题。

document.getElementById('myTable').querySelectorAll('tbody>tr>td')

querySelectorAll无法正常工作

4 个答案: