Wenn onclick gehe zu div

Question

Ich habe etwas, mit dem ich Hilfe brauche. Ich möchte auf ein Bild klicken und wenn ich klicke, gehe ich zum div.

Das ist der Code, den ich habe und wenn Sie dies kopieren und es selbst versuchen, werden Sie sehen, wenn ich auf das Bild klicke, wird ein div geöffnet, aber wenn ich viele Bilder habe, weiß ich nicht, wo es geöffnet ist Ich möchte zum div gehen, wenn ich auf das Bild klicke.

<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

Ich weiß nicht, wie es auf reinem js sein wird. Aber in JQ können Sie als nächstes verwenden()

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

Und in jq:

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

Aber es wird funktionieren, wenn Sie nach jedem Bild div haben. wenn Sie viele Bilder und ein Div mit ID modal01 haben? dann verwenden:

$('.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

Wenn Ihr Problem, wenn Sie auf das Bild, um div blättert, können Sie:

scrollIntoView: er Element.scrollIntoView() Methode scrollt das Element, von dem es aufgerufen wird, in den sichtbaren Bereich des Browserfensters.

Das Snippet:

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>