回声中的javascript（document.getelementbyid）无法正常工作（可能错误地引用了引号）

Question

我正在运行一段时间（php）构建行，而onclick它们打开模态。但是我无法在回声中正确地获得teavascript。

我在互联网上看了很多，但他们都没有像我这样使用那么多的报价。

比以前更详细一点。有一个名为“nuujts”的数据库，包含一个'id'，'titel'，'subtitel'，'inhoud'（内容），'aafbeelding'（html img src = on server）

下面是一个硬编码版本的例子，现在需要从mysql服务器中提取

document.getElementByID应为$ row ['id']

<li onclick="document.getElementById('2').style.display='block'" class="w3-border">
   <a href="#">
      <div class="w3-row">
         <img src="images/tumbnail.png" class="w3-image w3-third">
         <div class="w3-twothird"><h6>Leever Bontje Middig</h6>Bòntje middig geörganiseerd door V.V. De Tuinhagedisse</br></br>Laes verder -></div>
      </div>
   </a>
</li>
<div id="2" class="w3-modal">
   <div class="w3-modal-content w3-text-black w3-animate-zoom">
      <header class="w3-container w3-text-white" style="background-color: #005415;">
         <span onclick="document.getElementById('2').style.display='none'" class="w3-button w3-xlarge w3-hover-red w3-display-topright" title="Sjloete">&times;</span>
         <h2>Leever Bòntje Middig</h2>
      </header>
      <p>Bòntje middig geörganiseerd door vv de Tuinhagedisse</p>
      Bòntje middig geörganiseerd door vv de Tuinhagedisse veur miense oet Leeve én omsjtreke!</br>
      Mit o.a. optraejes van Toeter Thijs en Pyure.</br>
      De middig begint om 14.00 oer (zaal aope vanaaf 13.30 oer).</br>
      <p>Ein kaertje kost €5,00, daoveur krieg geer entree & koffie mit vlaai.</p>

      <p>Sjpisjaal veur de miense die van boete Leeve komme, is dur GRATIS verveur geregeld. Opsjtapplaatse: de Donderie en 't Paradies.</p>

      Kaertjes kinne besjteld waere via:</br>
      [email protected] óf [email protected]</br>
      Gaef naam, adres, tillefoonnummer en 't aantal luuj door véúr 27 fibberwarie. VOL=VOL</br>

      Wilt geer meer informatie hubbe? Gebroek dan baovesjtaonde mailadressen of bel nao 06-16353489.
   </div>
</div>

<?php
   $sql = "SELECT * FROM nuujts";
   $result = $conn->query($sql);

   if ($result->num_rows > 0 ) {
      while ($row = $result->fetch_assoc()) {
         echo "<li onclick='document.getElementById(".$row['id'].").style.display'block'' class='w3-border'>";
            echo "<a href='#'>";
               echo "<div class='w3-row'>";
                  echo $row['aafbeelding'];
                  echo "<div class='w3-twothird'><h6>".$row["titel"]."</h6>".$row["subtitel"]."</br></br>Laes verder -></div>";
               echo "</div>";
            echo "</a>";
         echo "</li>";
         echo "<div id='".$row["id"]."' class='w3-modal'>";
            echo "<div class='w3-modal-content w3-text-black w3-animate-zoom'>";
               echo "<header class='w3-container w3-text-white' style='background-color: #005415'>";
                  echo "<span onclick='document.getElementById(".$row['id'].").style.display='none'' class='w3-button w3-xlarge w3-hover-red w3-display-topright' title='Sjloete'>&times;</span>";
                  echo "<h2>".$row["titel"]."</h2>";
               echo "</header>";
               echo "<p>".$row["subtitel"]."</p>";
               echo $row["inhoud"];
            echo "</div>";
         echo "</div>";
      }
   }
?>

没有任何反应，但模式应该打开。我相信问题在引号中，但我无法围绕正确的报价使用

Answer 1

您可以随时简化PHP而不是嵌入javascript，而是依赖于PHP之外的javascript。

首先，不是onclick，而是将id输出到id的数据属性中，并添加一个额外的类。然后使用javascript添加点击事件处理程序。

echo "<li data-id='{$row['id']}' class='show-modal w3-border'>";

echo "<span data-id='{$row['id']}' class='hide-modal w3-button w3-xlarge w3-hover-red w3-display-topright' title='Sjloete'>&times;</span>";


var objs = document.getElementsByClassName('show-modal');

for(var i = 0; i < objs.length; i++) {
  (function(index) {
    objs[index].addEventListener("click", function() {
       document.getElementById(this.dataset.id).style.display = 'block';
     })
  })(i);
}

var objs = document.getElementsByClassName('hide-modal');

for(var i = 0; i < objs.length; i++) {
  (function(index) {
    objs[index].addEventListener("click", function() {
       document.getElementById(this.dataset.id).style.display = 'none';
     })
  })(i);
}