使用多个获取的MySQL数据的JS问题[PHP，MySQL和JS]

Question

我正在学习JS并且我的脚本有一些问题，需要你的帮助！

我正在编写一个代码，其中我有一个从我的数据库中获取img标题的列表，通过单击标题，应该弹出一个带有描述的div框。

我的问题是，我的脚本代码仅适用于第一次获取的数据。

这是我的代码的简单版本：
并在我创建一个剪切的代码下面（没有php元素）

<!DOCTYPE html>
<html>
  <head>
    <title>XY</title>
    <meta charset="UTF-8"/>
  </head>

  <body>
    <div id="frame">
        <?php
        $db = mysqli_connect("localhost", "root", "", "xy");
        $result = mysqli_query($db, "SELECT * FROM images");
          while ($row = mysqli_fetch_array($result))
          {
            echo "<div class='A'>";
              echo "<a class='img_id'># ".$row['img_id']."</a><br>";
              echo "<div id='img_title'><a>Title: <b>".$row['img_title']."</b></a></div>";
            echo "</div>";
          }
          echo "<div id='popup'>";

          echo "</div>";
        ?>
    </div>

    <style>
      *{font-family: arial; padding: 0px; margin: 0px;}
      body{background-color:rgba(100,100,100);}
      .A{height: 50px; width: 150px; background-color:rgba(150,150,150); margin-bottom: 10px; margin-left: 10px;}
      .img_id{color:rgba(100,100,100);}
      #img_title{color: white;} #img_title:hover{cursor: pointer; color:rgba(50,50,50);}
      #popup{position: absolute; height: 300px; width: 500px; top: 0px; left: 170px; background-color:rgba(50,50,50); opacity: 0;}
    </style>

    <script>
    document.getElementById('img_title').onclick = function()
    {
      var bg = document.getElementById('popup');
      bg.setAttribute("style", "opacity: 1;");
    }
    </script>

  </body>

</html>

SNIPPET低于PHP元素

 document.getElementById('img_title').onclick = function() { var bg = document.getElementById('popup'); bg.setAttribute("style", "opacity: 0;"); bg.setAttribute("style", "opacity: 1;"); } 

 *{ font-family: arial; padding: 0px; margin: 0px; } body{ background-color:rgba(100,100,100); } .A{ height: 50px; width: 150px; background-color:rgba(150,150,150); margin-bottom: 10px; margin-left: 10px; } .img_id{ color:rgba(100,100,100); } #img_title{ color: white; } #img_title:hover{ cursor: pointer; color:rgba(50,50,50); } #popup{ position: absolute; height: 300px; width: 500px; top: 0px; left: 170px; background-color:rgba(50,50,50); opacity: 0; } 

  <!DOCTYPE html> <html> <head> <title>XY</title> <meta charset="UTF-8"/> </head> <body> <div id="frame"> <div class='A'> <a class='img_id'>#1</a><br> <div id='img_title'><a>Title: AAAAA<b></b></a></div> </div> <div class='A'> <a class='img_id'>#2</a><br> <div id='img_title'><a>Title: BBBBB<b></b></a></div> </div> <div class='A'> <a class='img_id'>#3</a><br> <div id='img_title'><a>Title: CCCCC<b></b></a></div> </div> <div id='popup'> </div> </div> </body> </html> 

只有＃1可以工作（你必须刷新并点击＃2，看看，它不起作用）

后来我想在这个弹出框中获取图像描述，但这不是这个问题的一部分！

Answer 1

不应重复ID元素。

在类上使用jQuery单击侦听器：

$( ".img_id" ).click(function() {
  alert( "Handler for .click() called." );
});

Answer 2

您多次分配相同的ID（img_title）..

id属性在页面中必须是唯一的。

使用类来做到这一点，你是对的

Answer 3

1. 我已将id='img_title'更改为class='img_title'因为您的同名ID不能超过1个。

2. 在javaScript中，我把.img_title元素放在一个数组中（ myarray ）。 例如，您可以使用方法map()迭代数组，但您可以选择使用其他方法。

 let myarray = Array.from(document.querySelectorAll('.img_title')) let bg = document.getElementById('popup'); myarray.map((e) => { e.addEventListener("click", e=>{ bg.setAttribute("style", "opacity: 0;"); bg.setAttribute("style", "opacity: 1;"); }) }) 

 *{ font-family: arial; padding: 0px; margin: 0px; } body{ background-color:rgba(100,100,100); } .A{ height: 50px; width: 150px; background-color:rgba(150,150,150); margin-bottom: 10px; margin-left: 10px; } .img_id{ color:rgba(100,100,100); } #img_title{ color: white; } #img_title:hover{ cursor: pointer; color:rgba(50,50,50); } #popup{ position: absolute; height: 300px; width: 500px; top: 0px; left: 170px; background-color:rgba(50,50,50); opacity: 0; } 

  <div id="frame"> <div class='A'> <a class='img_id'>#1</a><br> <div class='img_title'><a>Title: AAAAA<b></b></a></div> </div> <div class='A'> <a class='img_id'>#2</a><br> <div class='img_title'><a>Title: BBBBB<b></b></a></div> </div> <div class='A'> <a class='img_id'>#3</a><br> <div class='img_title'><a>Title: CCCCC<b></b></a></div> </div> <div id='popup'> </div> </div> 

我希望它有所帮助

UPDATE

我需要更多地了解您的需求。 我不太确定会这样做。 请在您的JavaScript中尝试此操作：

let myarray = Array.from(document.querySelectorAll('.img_title'))
let bg = document.getElementById('popup');
myarray.map((e) => {
e.addEventListener("click", e=>{
  // retrieve the actual value of opacity for bg
  bgStyle = window.getComputedStyle(bg, null).getPropertyValue("opacity");
  // if the opacity is "0" make it "1" otherwhise make it "0"
  let opacity = bgStyle == "0" ? "1" : 0;
  // use the opacity variable
  bg.setAttribute("style", `opacity:${opacity};`); 
})
})