当onclick转到div

Question

I have something that I need help with. I want to click on an image and when I click I want to go to the div .

This is the code that I have and if you copy this and try it yourself, you will see that when I click on the image a div is opened but if I have many images I won't know where is open so I want to go to the div when I click on the image.

<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

I don't know how it will be on pure js. But in JQ you can use next()

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

And in jq:

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

But it will work if you have div after each image. if you have many images and one div with id modal01? then use this:

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

If your issue is scrolling to div when click on the image, you can use:

scrollIntoView : he Element.scrollIntoView() method scrolls the element on which it's called into the visible area of the browser window.

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