Question

我具有用于图像视图的（onclick）功能代码，该代码运行正常，但问题是仅当我第二次单击时它才运行。我不明白问题是什么，请帮助我解决此问题。我在下面附加了代码。

<script type="text/javascript">

        function showimage(z)
        {
                var modal = document.getElementById('myModal'+z);
                var img = document.getElementById('myImg'+z);
                var modalImg = document.getElementById('img01'+z);
                var captionText = document.getElementById('caption'+z);

                img.onclick = function ()
                {
                    modal.style.display = "block";
                    modalImg.src = this.src;
                    captionText.innerHTML = this.alt;
                }
        }
    </script>

<span>
      <img src="<?php echo $u_pimg; ?>" alt="" class="newsize" id="myImg<?php echo $p_id; ?>" onclick="showimage(<?php echo $p_id; ?>)">
    enter code here
</span>

Answer 1

首先，您绑定“ showimage”方法，当您单击该图像时便会调用

function ()
                {
                    modal.style.display = "block";
                    modalImg.src = this.src;
                    captionText.innerHTML = this.alt;
                }

单击图像上的

。因此，您不应将事件再次绑定在图片标签上。

从html标记中删除onclick =“ showimage（）”或从JS代码中删除img.onclick。

像这样写：

function showimage(z)
        {
                var modal = document.getElementById('myModal'+z);
                var img = document.getElementById('myImg'+z);
                var modalImg = document.getElementById('img01'+z);
                var captionText = document.getElementById('caption'+z);

                 modal.style.display = "block";
                    modalImg.src = img.src;
                    captionText.innerHTML = this.alt;
        }

它将完美运行。

Answer 2

不清楚您的代码在做什么，因为您只提供其中的一小部分。但是，您在onlick函数中肯定有一个完全不必要的showimage。尝试删除内部的img.onclick吗？

     <script type="text/javascript">

        function showimage(z)
        {
                var modal = document.getElementById('myModal'+z);
                var img = document.getElementById('myImg'+z);
                var modalImg = document.getElementById('img01'+z);
                var captionText = document.getElementById('caption'+z);

                modal.style.display = "block";
                modalImg.src = img.src; // <- replace this with img
                captionText.innerHTML = img.alt;
        }
    </script>

onclick函数，仅在第二次单击后才起作用

2 个答案: