我正在学习 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>
下面没有 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，才能看到，它不起作用)
稍后我想在这个弹出框中获取图像描述，但这不是这个问题的一部分!
最佳答案
我已将
id='img_title'更改为class='img_title'，因为同名的 ID 不能超过 1 个。在 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>希望对你有帮助
更新
我需要更多地了解您的需求。我不太确定这样做。请在您的 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};`);
})
})
关于javascript - 处理多个获取的 MySQL 数据的 JS 问题 [PHP, MySQL & JS]，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52257330/