onclickがdivに行く

Question

私は助けが必要な何かを持っています。私は画像をクリックしたいと思うし、クリックするとdivに行きたい。

これは私が持っているコードであり、これをコピーして自分で試してみると、画像をクリックするとdivが開かれていますが、画像がたくさんあるとわかりません私は画像をクリックするとdivに行きたいです。

<img src="http://www.hdwallpapers.in/walls/taboo_tom_hardy_2017-wide.jpg" style="width:100%" onclick="onClick(this)" alt="Taboo"> 
<div id="modal01" class="w3-modal w3-black w3-padding-0" onclick="this.style.display='none'"> 
    <span class="w3-closebtn w3-text-white w3-opacity w3-hover-opacity-off w3-xxlarge w3-container w3-display-topright">×</span> 
    <div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64"> 
     <img id="img01" class="w3-image"> 
     <p id="caption"></p> 
    </div> 
</div> 

<script> 
function onClick(element) { 
    document.getElementById("img01").src = element.src; 
    document.getElementById("modal01").style.display = "block"; 
    var captionText = document.getElementById("caption"); 
    captionText.innerHTML = element.alt; 
} 
</script> 

Answer 1

純粋なjsにどのようになるのかわかりません。

<img src="http://www.hdwallpapers.in/walls/taboo_tom_hardy_2017-wide.jpg" style="width:100%" class="click_image" alt="Taboo"> 
    <div id="modal01" class="w3-modal w3-black w3-padding-0" onclick="this.style.display='none'"> 
     <span class="w3-closebtn w3-text-white w3-opacity w3-hover-opacity-off w3-xxlarge w3-container w3-display-topright">×</span> 
     <div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64"> 
      <img id="img01" class="w3-image"> 
      <p id="caption"></p> 
     </div> 
    </div> 

そしてJQで しかしJQで次回使用することができます（）：

$('.click_image').click(function(){ 
var alt=$(this).attr('alt'); 
$(this).next().find('#caption').html(alt); 
}); 

しかし、あなたはそれぞれの画像の後にDIVている場合、それが動作します。多くの画像があり、1つのdivがid modal01の場合は ？あなたの問題は、あなたが画像をクリックしてくださいを使用することができたときにdivのためにスクロールしている場合

$('.click_image').click(function(){ 
 
var alt=$(this).attr('alt'); 
 
$('div#modal01').show(0).find('#caption').html(alt); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="http://www.hdwallpapers.in/walls/taboo_tom_hardy_2017-wide.jpg" style="width:100%" class="click_image" alt="Taboo"> 
 
<img src="http://www.hdwallpapers.in/thumbs/2017/power_rangers_2017_4k_8k-t2.jpg" style="width:100%" class="click_image" alt="Rangers"> 
 
<img src="http://www.hdwallpapers.in/thumbs/2014/titanic-t2.jpg" style="width:100%" class="click_image" alt="Titanic"> 
 
     <div id="modal01" class="w3-modal w3-black w3-padding-0" onclick="this.style.display='none'"> 
 
      <span class="w3-closebtn w3-text-white w3-opacity w3-hover-opacity-off w3-xxlarge w3-container w3-display-topright">×</span> 
 
      <div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64"> 
 
       <img id="img01" class="w3-image"> 
 
       <p id="caption"></p> 
 
      </div> 
 
     </div>

Answer 2

：

scrollIntoView：彼は（）メソッドがスクロールをElement.scrollIntoViewその後、これを使用ブラウザウィンドウの可視領域に呼び出された要素。

スニペット：

function onClick(element) { 
 
    document.getElementById('modal01').scrollIntoView(); 
 
}

<img src="http://www.hdwallpapers.in/walls/taboo_tom_hardy_2017-wide.jpg" style="width:100%" onclick="onClick(this)" alt="Taboo"> 
 
<div id="modal01" class="w3-modal w3-black w3-padding-0" onclick="this.style.display='none'"> 
 
    <span class="w3-closebtn w3-text-white w3-opacity w3-hover-opacity-off w3-xxlarge w3-container w3-display-topright">×</span> 
 
    <div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64"> 
 
     <img id="img01" class="w3-image"> 
 
     <p id="caption"></p> 
 
    </div> 
 
</div>