querySelectorAll not working

Question

私はjavascriptで合計初心者です。 私はこれらの2つの写真でモーダル画像を作成しようとしています。 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

複数のボタンをクリックする場合は、ボタンを別の要素に置き、その代わりにeventListenerを追加します。 clickイベントがトリガされると、ボタンをラップする要素（.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>

Answer 2

querySelectorAll(<something>)ソートのそれはアイテムのコレクションであるという意味で、配列のように...のNodeListを返します。そのため、[0]（または[1]など）を追加すると、1つの要素が得られます。対照的に、querySelector(<selector>)はただ1つの項目を返します。 querySelectorAllとquerySelectorのMDN（Mozilla Developer Network）のドキュメントを確認してください。

複数の要素（たとえば、class="pics"など）を識別するクラスにquerySelectorを使用すると、querySelectorは最初の要素のみを返します。したがって、あなたが実際にそのようなクラスを使用したい場合は、querySelectorAll('pics')[0]などを使うほうが良いかもしれません。querySelectorは、クラスの代わりにidの方が使いやすくなります。 id="picA"とid="picB"と表示されている場合は、querySelector('picA')と対比してquerySelector('picB')となります。

document.getElementsByClassNameを使用するかどうか尋ねます。私はそれがあなた次第であると思います。しかし、上記の2つの方法（querySelectorとquerySelectorAll）は非常に強力で非常に便利で、さまざまな方法で使用できます。 idを持つクラス、属性を持つクラス、これらすべての組み合わせ...クラス名に限定されるよりもはるかに強力です。

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>