Javascript 当onclick转到div时

我有些事需要帮助。我想单击一个图像，当我单击时，我想转到

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>

×

我不知道在纯js上会怎么样。 但在JQ中，您可以使用next（）

但是，如果在每个图像后都有div，它将起作用。 如果您有多个图像和一个id为modal01的div？然后用这个：

$（'.单击图像'）。单击（函数（）{
var alt=$（this.attr（'alt'）；
$（'div#modal01'）.show（0）.find（'div#caption'）.html（alt）；
});

×

如果单击图像时问题滚动到div，则可以使用：

：he Element.scrollIntoView（）方法将调用它的元素滚动到浏览器窗口的可见区域

片段：


函数onClick（元素）{
document.getElementById（'modal01'）.scrollIntoView（）；
}

×


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

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