Блог

Главная - Вопросы по программированию - querySelectorAll не работает

querySelectorAll не работает

#javascript #css

#javascript #css

Вопрос:

Я новичок в 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'">amp;times;</span>

</div>

Комментарии:

1. поскольку это коллекция HTML, это не один элемент.

2. querySelectorAll возвращает HTML-коллекцию — если вы хотите добавить слушателя к каждому изображению, вам придется перебирать всю коллекцию. Он работает так, как ожидалось.

3. если я поставлю querySelectorAll(‘.pics1)[0]; ?? или если я поставлю querySelectorAll(‘.pics)[0];

Ответ №1:

Если вам нужно нажать более одной кнопки, поместите кнопки в другой элемент и добавьте к нему EventListener вместо этого. Когда событие click запускается, оно запускается не только для элемента, который переносит buttons ( .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'">amp;times;</span>

</div>

Ответ №2:

querySelectorAll(<something>) возвращает список узлов … вроде как массив в том смысле, что это набор элементов. Вот почему добавление [0] (или [1] и т. Д.) Дает вам Один элемент. Напротив, querySelector(<selector>) просто вернет один элемент. Проверьте документацию MDN (Mozilla Developer Network) для querySelectorAll и querySelector .

Если вы пытаетесь получить один элемент и используете querySelector с классом, который идентифицирует более одного элемента (например, вашего class="pics" ), то querySelector просто вернет первый. Таким образом, если вы действительно хотите использовать подобный класс, вам может быть лучше использовать querySelectorAll('pics')[0] , и т.д. querySelector проще использовать с идентификаторами вместо классов, например querySelector('picA') , по сравнению querySelector('picB') с тем, если вы идентифицируете их с id="picA" помощью и id="picB" .

Вы спрашиваете, следует ли вам использовать document.getElementsByClassName . Я полагаю, это зависит от вас. Однако я считаю, что два вышеупомянутых метода ( querySelector и querySelectorAll ) очень мощные и очень полезные, поскольку вы можете использовать их различными способами, например, с классами, с идентификаторами, с атрибутами, с комбинациями всего этого…гораздо более мощный, чем просто ограничение именем класса.

Ответ №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>