如何在 While 循环中使用 php 变量创建 JavaScript 变量？

Question

我正在用 MySQL 数据库中的信息制作一个网站，我希望在单击按钮后显示图片。

              echo "<img align=\"left\"src=\"".$path[$y]."\" alt=\"error\">";
              echo "<img align=\"right\"src=\"".$path_edit[$y]."\" alt=\"error\" id=\"$id[$y]\" style=\"visibility:hidden\">";

              echo "_____________________________________";
              echo "<script type=\"text/javascript\">";
                echo "function showImage() {
                  document.getElementById(\"$id[$y]\").style.visibility=\"visible\";
                }";
              echo "</script>";
              echo "<br><br>";
              echo "<input type=\"button\" onclick=\"showImage();\" value=\"Show Picture\"/>";
              echo "<p>";

我希望第二张图片（带有 $PATH_edit[$y] 的图片）在点击它的按钮后出现。（按钮出现在每对图像之后）。我有回声，因为它都在循环中，我希望它显示的次数与数据库的入口数一样多。我知道我不能在 Javascript 中使用 php 变量，我尝试了所有方法但无法修复它。我是 php、html 的新手，我不知道 JavaScript。

This is how it looks like without clicking the buttom 我知道我可以为图片添加一个 id，但这只适用于第一个。 This is how it looks like after clicking 我也试过这个：

echo "function showImage() {
                      var id_id =  \"$id[$y]\";
                      document.getElementById(id_id).style.visibility=\"visible\";
}";

这是完整的代码：

                <!DOCTYPE html>

<!--- basic page needs
================================================== -->
<meta charset="utf-8">
<title>Base de Datos ATLAS</title>
<meta name="Una gran base de datos de microscopía" content="">
<meta name="Pablo Cruz" content="">

<!-- mobile specific metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<!-- CSS
================================================== -->
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/vendor.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="style.css">

<!-- script (I tried to put the function here, bu tit does not work either)
================================================== -->
<script src="js/modernizr.js"></script>

<!-- favicons
================================================== -->
<link rel="shortcut icon" href="logo.jpg" type="image/x-icon">
<link rel="icon" href="logo.jpg" type="image/x-icon">

<!-- preloader
================================================== -->
<div id="preloader">
    <div id="loader" class="dots-fade">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>



<!-- header
================================================== -->
<header class="s-header header">

    <div class="header__logo">
        <a class="logo" href="index.html">

            <img src="images/logo_sin.png" alt="Homepage" >
        </a>
    </div> <!-- end header__logo -->



    </div>  <!-- end header__search -->

    <a class="header__toggle-menu" href="#0" title="Menu"><span>Menu</span></a>
    <nav class="header__nav-wrap">

        <h2 class="header__nav-heading h6">Navigate to</h2>

        <ul class="header__nav">
            <li class="current"><a href="index.html" title="">Inicio</a></li>
            <li class="has-children">
                <a href="#0" title="">Base de Datos</a>
                <ul class="sub-menu">
                    <li><a href="base_de_datos.html">Microscopía Electrónica</a></li>
                    <li><a href="base_de_datos.html">Microscopía Óptica</a></li>

                </ul>
            </li>
            <li class="has-children">
                <a href="#0" title="">Almacén</a>
                <ul class="sub-menu">
                    <li><a href="s_mitocondrias.html">Mitocondrias</a></li>
                    <li><a href="s_nucleo.html">Núcleo</a></li>
                    <li><a href="s_lisosoma.html">Lisosomas</a></li>
                    <li><a href="s_vesiculas.html">Vesículas</a></li>
                    <li><a href="s_golgi.html">Aparato de Golgi</a></li>
                    <li><a href="s_microtubulos.html">Microtubulos</a></li>
                    <li><a href="s_rer.html">Retículo Endosplamático Rugoso</a></li>
                <!--
                <ul class="sub-menu">
                    <li><a href="single-video.html">Video Post</a></li>
                    <li><a href="single-audio.html">Audio Post</a></li>
                    <li><a href="single-standard.html">Standard Post</a></li>
                </ul>
            -->
                </ul>
            </li>
            <li><a href="https://www.usal.es/" target="_blank"title="">USAL</a></li>
            <li><a href="contacto.html" title="">Contacto</a></li>
        </ul>   <!-- end header__nav -->

        <a href="#0" title="Close Menu" class="header__overlay-close close-mobile-menu">Close</a>

    </nav> <!-- end header__nav-wrap -->

</header> <!-- s-header -->


<!-- s-content
================================================== -->
<section class="s-content s-content--top-padding s-content--narrow">

    <article class="row entry format-standard">


        <div class="entry__header col-full">
            <h1 class="entry__header-title display-1">
                Galeria de Mitocondrias.
            </h1>
        </div>


        <?PHP
        require "connect.php";
        $x=0;
        $y=0;
        $autosuma = 222;
        $database = "tfg";
        $db_found = mysqli_select_db($db_handle, $database);
        if ($db_found) {
          $SQL = "SELECT * FROM id_organulo WHERE mitocondria = 1";
          $result = mysqli_query($db_handle, $SQL);

          while ( $db_field = mysqli_fetch_assoc($result) ) {
            $id[$x] = $db_field['id'];
            $comentario[$x] = $db_field['comentario'];
            $nombre_de_foto[$x] = $db_field['nombre_de_foto'];
            $autor[$x] = $db_field['autor'];
            $path[$x] = $db_field['PATH'];
            $path_edit[$x] = $db_field['PATH_edit'];
            $ruta_perfil_foto[$x] = $db_field['ruta_perfil_foto'];
            $x = $x+1;
            echo "<div class=\"col-full entry__main\">";
                echo "<div class=\"entry__author\">";
                  echo "<img src=\"".$ruta_perfil_foto[$y]."\"alt=\"\">";
                  echo "<div class=\"entry__author-about\">";
                    echo "<h5 class=\"entry__author-name\">";
                      echo "<span>$autor[$y]</span>";
                      echo "<a href=\"0\">$nombre_de_foto[$y]</a>";
                    echo "</h5>";
                  echo "</div>";
                echo "</div>";
                echo "<br>";
            echo "</div>"; // <!-- s-entry__main -->
            echo "<center>";
            echo "<img align=\"left\"src=\"".$path[$y]."\" alt=\"error\">";
            echo "<img align=\"right\"src=\"".$path_edit[$y]."\" alt=\"error\" id=\"$id[$y]\" style=\"visibility:hidden\">";
            echo "_____________________________________";
            echo "<br><br>";
            echo '<input type="button" onclick="showImage('.$id[$y].');" value="Show Picture"/>';
            echo "<p>";
                print $comentario[$y];
            echo "</p>";
            echo "</center>";
            $y++;
          }
        }
        else {
        print "Database NOT Found ";
        }
        mysqli_close($db_handle);
        ?>
        <script type=\"text/javascript\">
          function showImage() {
            var id = <?php echo (json_encode($id[$y])); ?>;
            document.getElementById(id).style.visibility="visible";
        }
        </script>";





          <div class="row pagination-wrap">
            <div class="col-full">
                <nav class="pgn" data-aos="fade-up">
                    <ul>
                        <li><a class="pgn__prev" href="s_mitocondrias_result_3.php">Prev</a></li>
                        <li><a class="pgn__num" href="s_mitocondrias_result_1.php">1</a></li>
                        <li><a class="pgn__num" href="s_mitocondrias_result_2.php">2</a></li>
                        <li><a class="pgn__num" href="s_mitocondrias_result_3.php">3</a></li>
                        <li><span class="pgn__num current">4</span></li>

                        >
                    </ul>
                </nav>
                <hr>
            </div>
          </div>

          <p> <h5>Codigo de rotulación:</h5>  </p>
          M: Mitocondrias <br>
          dM: Doble membrana <br>
          cM: Cresta Mitocondrial <br>
          R: Ribosomas <br>
          N: Nucleo <br>
          eu: Eucromatina <br>
          Nu: Nucleolo <br>
          Mtu: Microtúbulos <br>
          Ec: Esterocilio <br>
          </p>

        </center>
        <?php $y++; ?>















    </article> <!-- end entry/article -->

提前致谢。

Answer 1

先提一点建议，分开php、javascript和html。一起很难阅读和维护。否则，您会在循环的每次通过时创建一个函数。没有什么能像那样工作，这并不困扰我。像这样尝试：

将图像的 ID 作为参数发送给函数。 单个函数，将在循环之后。

function showImage(id) {
  document.getElementById(id).style.visibility="visible";
}

并且在循环的每一段都将图像的 id 发送到函数，如下所示：

<input type="button" onclick="showImage(\"$id[$y]\");" value="Show Picture">

最后它会给出类似的东西:

<?php
    while(...){
       echo '<img align="left" src="'.$path[$y].'" alt="error">';
       echo '<img align="right" src="'.$path_edit[$y].'" alt="error" id="'.$id[$y].'" style="visibility:hidden">';
       echo '_____________________________________';
       echo '<br><br>';
       echo '<input type="button" onclick="showImage('.$id[$y].');" value="Show Picture">';
       echo '<p>';
    }
?>

<script type="text/javascript">
    function showImage(id) {
       document.getElementById(id).style.visibility="visible";
    }
</script>

回显时使用'，显示html时不用"，更实用。祝未来好运

如何在 While 循环中使用 php 变量创建 JavaScript 变量？

How can I create a JavaScript Variable with my php Variable in a While loop?

html

javascript

php

echo

while-loop