Question

目标：我试图创建一个简单的点击复制功能，允许用户点击图像并将图像路径复制到剪贴板。

背景：

我有一个简单的表单，它将图像和相关输入字段与图像路径一起呈现为后端服务器通过PHP的值。在那种形式中，我有一个按钮（它是图像本身），当点击它时，将图像路径（在服务器上，不是相对的）从输入字段复制到剪贴板。因此，要复制到剪贴板的图像路径类似于＆＃34; ../ img / picture.png＆＃34;。

使用PHP＆＃34; foreach＆＃34;解析图像及其输入字段，因此为了获得要使用的JS按钮的唯一输入ID，我为每个输入字段分配了一个ID，其中包含一个由一个PHP＆＃34; $ count＆＃34;变量。一切都很好。表格如下：

问题：

使用带有路径的coorelating输入字段解析图像。输入字段也分配了唯一的ID，但是，当我单击按钮复制其路径时，它将只复制表单上最后一个图像的路径。按下哪个按钮并不重要，只复制最后一个图像路径。浏览器控制台中没有错误。

您将在下面的图片中看到js函数正确解析输入ID，但由于某种原因，它只复制最后加载的图像元素的路径。因此，您将在图像中看到图像输入字段的ID为＆＃34; 12＆＃34;因为它是加载的第12张图像，但是如果有18张图像，它只会复制第18张图像＆＃39;尽管点击了之前的17张图片中的任何一张。

我做错了什么？

谢谢！

CODE ：

       <div id="picform"> 

            <?php

                $dirname = '../img/';
                $images = glob($dirname.'*.*');

                $count = 0;

                foreach ($images as $image) {

                    echo '<div id="imgthumb">';

                        echo '<button id="imgbtn" onclick="copyFunction()">';
                            echo '<center>';
                                echo '<img src="'.$image.'" style="width:7rem" />';
                            echo '</center>';
                        echo '</button>';

                        echo '<div id="imgpath">';
                            echo '<input type="text" value="'.$image.'"  id="'.$count.'" name="imginput" readonly>';

                            ?>
                                <script>
                                    function copyFunction() {
                                        var count = '<?php echo json_encode($count);?>';
                                        var copyText = document.getElementById(count);
                                        copyText.select();
                                        document.execCommand("Copy");
                                    }
                                </script>
                            <?php

                        echo '</div>';

                    echo '</div>';

                    ++$count;

                }
            ?>

        </div>

Answer 1

每次在脚本中重新定义copyFunction时，当脚本中的任何内容调用copyFunction时，该函数就会被调用。更改它，以便您只有一个copyFunction功能。

例如，也许改变

echo '<button id="imgbtn" onclick="copyFunction()">';

到

echo '<button id="imgbtn" onclick="copyFunction(' . $count . ')">';

并且只在其他地方定义copyFunction。

但是使用内联事件处理程序是一种不好的做法，导致代码质量差，难以管理的代码，正如您经历的那样 - 它与eval一样糟糕。请认真考虑使用JavaScript附加您的活动，例如：https://developer.mozilla.org/en/DOM/element.addEventListener

例如，您甚至不需要使用ID来标识要复制的输入元素 - 而是为copyFunction提供event参数，然后选中event.target以识别单击的按钮，然后导航到下面的input。

Answer 2

在PHP中编写JS非常容易混淆，不值得。让PHP编写HTML - 这足够令人困惑 - 然后编写适用于HTML的JS。

var thumbs = document.querySelectorAll('.imgthumb');
thumbs.forEach( function ( thumb ) {
    var button = thumb.querySelector('button');
    var input = thumb.querySelector('input');
    button.addEventListener('click', function () {
        input.select();
        document.execCommand("Copy");
    })
})

imgthumb其余应该是课程，而不是ID;你只能使用一次ID。

Answer 3

每次foreach执行时你都会重新定义copyFunction，所以当你调用它时，脚本会调用最后一个。在其他地方定义它并添加一个参数，您可以使用$ count变量：copyFunction(<?php echo json_encode($count);?>)

如何在js函数中使用PHP foreach变量

3 个答案: