ID 在 PHP 的 while 循环中未按预期工作

Question

我正在尝试创建一个 while 循环，为每个 $version 值回显一个按钮。 shell_exec() 从 Python 文件返回一个值，并响应唯一的 $version 值。为此，基本目标是创建一个按钮数量取决于版本值的页面。

然后，用户可以单击任何特定按钮并访问该特定按钮（版本）的数据。为此，我尝试将变量与 ID 混合，但它似乎不起作用。我能做些什么来解决这个问题？目前没有任何按钮响应。

代码：

<?php
              
              
              while ($version != 0) {


                echo '
                <br>
                <br>
                <button id="toggle-' . $version . '">TOGGLE</button>
                <div style= "display:none;" id="content-' . $version . '">

                ';

                $command = escapeshellcmd("C:/Python38/python.exe C:/xampp/htdocs/Ensemble/login/test.py $email $version"); 
                $output = shell_exec("$command 2>&1");
                echo($output);

                echo '
                </div>


                <script>
                var toggle  = document.getElementById("toggle-' . $version . '");
                var content = document.getElementById("content-' . $version . '");

                toggle.addEventListener("click", function() {
                  content.style.display = (content.dataset.toggled ^= 1) ? "block" : "none";
                });
                </script>

                '
                ;

                $version--;
              }
            ?>

编辑

出现了一个新问题。只有一个按钮起作用。单击时，两个按钮都输出相同的内容而不是不同的版本。在 SQL 中，所有版本都不同，因此这很可能是 html/JS 的错误。

Answer 1

也许以下内容可能会有所帮助 - 尽管就 Python 调用而言它没有经过测试，但我认为如果我理解正确，其他代码应该可以正常工作。

每个 ID 在 DOM 中都必须是唯一的，我猜这就是为什么您尝试通过将 $version 数字添加到每个 ID 来制作它们的原因。如果您将querySelectorAll 与合适的表达式一起使用，则这并不是必需的。与 vanilla javascript 中存在的一个或多个父/兄弟选择器一起执行此操作可以相当容易地进行 DOM 导航和操作。这也意味着您可以对所有按钮使用相同的代码...希望对您有所帮助。

<?php
    while( $version > 0 ) {
    
        $command = escapeshellcmd( "C:/Python38/python.exe C:/xampp/htdocs/Ensemble/login/test.py $email $version" ); 
        $output = shell_exec("$command 2>&1");



        printf('
            <br />
            <br />
            
            <button data-version="%d">Toggle</button>
            <div style="display:none">%s</div>', 
            $version,
            $output 
        );

        $version--;
    }
    
    echo "
    <script>
        Array.from( document.querySelectorAll('button') ).forEach( bttn=>{
            bttn.addEventListener('click', function(e){
                let version=this.dataset.version;
                let div=this.nextElementSibling;
                    div.style.display=div.style.display=='block' ? 'none' : 'block';
                
            });
        })
    </script>";
?>

Answer 2

替换

<div style= "display:none;" "id="content-' . $version . '">

到

<div style= "display:none;" id="content-' . $version . '">

然后尝试。