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

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

背景：

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

我有一个简单的表单，它通过PHP显示图像和一个与图像路径相关的输入字段，作为来自后端服务器的值。在这种形式下，我有一个按钮（即图像本身），当单击该按钮时，它会将图像路径（在服务器上，不是相对的）从输入字段复制到剪贴板。因此，要复制到剪贴板的图像路径类似于“./img/picture.png”

图像及其输入字段使用PHP“foreach”进行解析，因此为了获得JS按钮要使用的唯一输入ID，我为每个输入字段分配了一个ID，其中包含一个由PHP“$count”变量生成的数字。这一切都很好。表单如下所示：

问题：

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

图像通过一个与路径相关的输入字段进行解析。输入字段也被分配了一个唯一的ID，但是，当我单击按钮复制它们的路径时，它将只复制表单上最后一个图像的路径。不管我按哪个按钮，只复制最后一个图像路径。浏览器控制台中没有错误

您将在下图中看到，js函数正在正确解析输入ID，但由于某些原因，它只复制加载的最后一个图像元素的路径。因此，您将在图像中看到，图像输入字段的ID为“12”，因为它是加载的第12个图像，但如果有18个图像，它将仅复制第18个图像的路径，尽管单击了前面17个图像中的任何一个

我做错了什么

谢谢

代码：

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

函数copyFunction（）{
var计数=“”；
var copyText=document.getElementById（计数）；
copyText.select（）；
文件。执行命令（“副本”）；
}

每次在脚本中重新定义

copyFunction

时，当脚本中的任何内容调用

copyFunction

时，就会调用该函数。将其更改为只有一个

copyFunction

功能

例如，可能会发生变化

echo'

到

echo'

并且只在其他地方定义一次
copyFunction

但是，使用内联事件处理程序是一种糟糕的做法，它会导致分解不良、难以管理的代码，正如您所经历的那样，这与
eval
一样糟糕。认真考虑用JavaScript附加事件，例如：

例如，您甚至不需要使用ID来标识要复制的输入元素，而是为
copyFunction
提供一个
event
参数，然后选中
event.target
来标识单击的按钮，并从中，导航到下方的
输入
。
每次foreach执行时，您都在重新定义
复制函数
，因此当您调用它时，脚本将调用最后一个。在其他任何地方定义它，并在其中添加一个可以使用$count变量的参数：
copyFunction（）
用PHP编写JS非常混乱，不值得。只要让PHP编写HTML——这已经够让人困惑的了——然后编写JS，它可以和HTML一起工作

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。
您在每次迭代中都会覆盖函数，而不是这样做，而是使用一个函数，单击项存储选择，单击复制按钮，使用项放置到剪贴板中。您会一次又一次地重新定义
copyFunction
。最近发出回声的一个变成了唯一的一个。对，我知道这一点。我只将js函数内联以显示它正确地解析了ID。不要把它放在那里。谢谢你的回复。对，我将JS脚本内联以测试它是否正确解析了输入ID，我不打算离开这里。就您的解决方案而言，我似乎无法让它正常工作，当我尝试根据您的建议编辑onclick功能时，我得到了一个“意外标记”…我假设是因为您在PHP函数本身中已经使用了PHP回显字符串？在PHP中编写Javascript时，这既繁琐又容易出错-不要这样做，将Javascript放在单独的.js文件中。当您确实需要将信息从PHP传递到Javascript时，请使用data-attributes、application/JSON或XHR.right，但是，如果我将其放在单独的js文件中，这意味着我还必须通过AJAX调用来获取实际的文件路径。我只是觉得这很简单。我会调查的。不，你不需要，只是在HTML的某个地方回显它们<代码>@BenWest我以为我一开始就是这么做的<代码>回显“”对，我让js函数内联以查看它是否正确解析ID。但是，当我将它移到foreach标记之外时，我在控制台中得到了“uncaughttypeerror:cannotreadproperty'select'of null”。就是这样！谢谢你，先生！