将 HTML 侦听器函数转换为 JavaScript（动态）？答案

【问题标题】：Convert HTML listener functions to JavaScript (dynamically)?将 HTML 侦听器函数转换为 JavaScript（动态）？
【发布时间】：2020-07-13 15:07:05
【问题描述】：

我正在使用 W3SCHOOL 引导程序。

下面的代码显示一个图像，如果您单击该图像，它会显示原始大小的图像（弹出？）。

现在，我正在尝试使用 for 循环将其转换为“n”个图像。 (*var selectedMarkerIndex 是 n 中的第 m 个图像)

我找到了示例：在 javascript 中动态显示图像或 s，但是我无法提出“如何添加这么多的大行（div 类、id、span 等）？”。

<div class="w3-row-padding">
  <div class="w3-half w3-container w3-margin-bottom">
    <div class="w3-container w3-white" id="ImageRGBDiv">
      <p><b>RGB Image</b></p>
      <img id="ImageRGB" onclick="document.getElementById('modalRGB').style.display='block'">
      <div class="w3-modal-content w3-animate-zoom">
      </div>
    </div>

    <div id="modalRGB" class="w3-modal" onclick="this.style.display='none'">
      <span class="w3-button w3-hover-red w3-xlarge w3-display-topright">&times;</span>
      <div class="w3-modal-content w3-animate-zoom">
        <img src="" style="width:100%" id="ImageRGBOriginal">
        <script type="text/javascript">
          document.getElementById("ImageRGBOriginal").src = "Data/RGB/image" + selectedMarkerIndex + ".jpg";
        </script>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

标签： javascript html css

【解决方案1】：

你的问题我不清楚。但你可以这样尝试

<div id="image">
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
</script>

<script type="text/javascript">

$(document).ready(function()
{
   var selectedMarkerIndex = $('#selectedMarkerIndex').val();

   for (var i = 0; i <=5; i++) 
   {
       var template = `<div class="w3-row-padding">
                    <div class="w3-half w3-container w3-margin-bottom">
                      <div class="w3-container w3-white" id="ImageRGBDiv">
                        <p><b>RGB Image</b></p>
                        <img id="ImageRGB" onclick="document.getElementById('`+i+`').style.display='block'">
                        <div class="w3-modal-content w3-animate-zoom">
                        </div>
                      </div>

                      <div id="`+i+`" class="w3-modal" onclick="this.style.display='none'">
                        <span class="w3-button w3-hover-red w3-xlarge w3-display-topright">&times;</span>
                        <div class="w3-modal-content w3-animate-zoom">
                          <img src="Data/RGB/image/`+ selectedMarkerIndex +`" style="width:100%" id="ImageRGBOriginal">
                        </div>
                      </div>
                    </div>
                  </div>`
          $('#image').append(template)
   }
}

</script>

【讨论】：