我对jquery和php还是很陌生，所以也许这只是愚蠢的事情。
我正在处理一个脚本，该脚本从数据库检索记录并将其打印到页面上。每个任务都有自己的ID。问题是我想向由php生成的特定div添加一个类。执行该任务的jquery脚本也是由php生成的。
如果只是将类添加到非php生成的div中，则jquery脚本可以工作，但是如果div是由php生成的，则不能。那我在做什么错？
function PrintTasks($day)
{
global $dbConnection;
global $dbName;
$dbName = 'db_planner_laurens';
$dbConnection = mysqli_connect('127.0.0.1', 'root', '', $dbName);
$sql = "SELECT * FROM tasks WHERE task_date LIKE '$day'";
$result = mysqli_query($dbConnection, $sql);
while($row = mysqli_fetch_assoc($result)) {
$Name = $row['task_name'];
$StartTime = substr($row['start_time'], 0, 5);
$EndTime = substr($row['end_time'], 0, 5);
$Description = $row['description'];
$TaskId = $row['task_id'];
$DropdownId = $TaskId + 1;
echo
"
<div class=\"task\">
<div class=\"taskControlAndTitle\">
<p>$Name</p>
<input type=\"checkbox\" id=\"$TaskId\" onclick=\"showMenu$TaskId()\">
<label for=\"$TaskId\">
<img src=\"mainsource/img/menu.svg\">
</label>
<div id=\"$DropdownId\">
hey
</div>
</div>
<div class=\"taskBody\">
<div class=\"taskTime\">$StartTime | $EndTime</div>
<div class=\"divider\"></div>
$Description
</div>
</div>
";
echo "
<script>
function showMenu$TaskId() {
if ($('$DropdownId').hasClass('showMenu')) {
$('$DropdownId').removeClass('showMenu');
}
else {
$('$DropdownId').addClass('showMenu');
}
}
</script>
";
}
}
生成的HTML：
<!doctype HTML>
<html>
<head>
<title>Planner</title>
<link rel="stylesheet" type="text/css" href="mainsource/css/desktop.css" >
<script src="mainsource/js/jquery.js"></script>
</head>
<body>
<div id="nav">
<div id="navleft">
<form action="dashboard.php" method="POST">
<input type="image" src="mainsource/img/dashboard.svg" id="dashboard">
<label for="dashboard">Dashboard</label>
</form>
</div>
<div id="navright">
<label class="userMenu">
<div id="userImage" class="userImageNav">
</div>
</label>
<form action="index.php" method="POST">
<input type="submit" value="Logout" id="logout">
</form>
</div>
</div>
<div id="plannerControl">
<div id="actions">
<form action="addtask.php" method="POST">
<input type="image" src="mainsource/img/add.svg"
id="addtask">
<label for="addtask">Add Task</label>
</form>
</div>
<div id="dateControl">
<form action="" method="POST">
<input type="image" src="mainsource/img/back.svg" name="weekBackward">
</form>
<p>15 July - 21 July</p>
<form action="" method="POST">
<input type="image" src="mainsource/img/forward.svg" name="weekForward">
</form>
</div>
</div>
<div id="plannerView">
<div id="weekView">
<div class="day">
<div class="dayTitle">
Sunday
</div>
<div class="taskList">
<p>15 July</p> </div>
</div>
<div class="day">
<div class="dayTitle">
Monday
</div>
<div class="taskList">
<p>16 July</p> </div>
</div>
<div class="day">
<div class="dayTitle">
Tuesday
</div>
<div class="taskList">
<p>17 July</p> </div>
</div>
<div class="day">
<div class="dayTitle">
Wednesday
</div>
<div class="taskList">
<p>18 July</p> </div>
</div>
<div class="day">
<div class="dayTitle">
Thursday
</div>
<div class="taskList">
<p>19 July</p>
<div class="task">
<div class="taskControlAndTitle">
<p>Nog een TEST</p>
<input type="checkbox" id="1501049399" onclick="showMenu1501049399()">
<label for="1501049399">
<img src="mainsource/img/menu.svg">
</label>
<div id="1501049400" class="display: hidden">
hey
</div>
</div>
<div class="taskBody">
<div class="taskTime">04:08 | 05:07</div>
<div class="divider"></div>
nog een test
</div>
</div>
<script>
function showMenu1501049399() {
if ($('1501049400').hasClass('showMenu')) {
$('1501049400').removeClass('showMenu');
}
else {
$('1501049400').addClass('showMenu');
}
}
</script>
</div>
</div>
<div class="day">
<div class="dayTitle">
Friday
</div>
<div class="taskList">
<p>20 July</p>
<div class="task">
<div class="taskControlAndTitle">
<p>Bespreking Fietstocht</p>
<input type="checkbox" id="70363444" onclick="showMenu70363444()">
<label for="70363444">
<img src="mainsource/img/menu.svg">
</label>
<div id="70363445" class="display: hidden">
hey
</div>
</div>
<div class="taskBody">
<div class="taskTime">19:00 | 22:00</div>
<div class="divider"></div>
Afspreken data, kijken of extra fietstassen nodig zijn.
</div>
</div>
<script>
function showMenu70363444() {
if ($('70363445').hasClass('showMenu')) {
$('70363445').removeClass('showMenu');
}
else {
$('70363445').addClass('showMenu');
}
}
</script>
<div class="task">
<div class="taskControlAndTitle">
<p>Hey</p>
<input type="checkbox" id="1130660554" onclick="showMenu1130660554()">
<label for="1130660554">
<img src="mainsource/img/menu.svg">
</label>
<div id="1130660555" class="display: hidden">
hey
</div>
</div>
<div class="taskBody">
<div class="taskTime">18:00 | 19:00</div>
<div class="divider"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque laoreet nunc ornare quam mattis, quis gravida diam euismod. Nullam et malesuada felis, sed sodales mauris. Suspendisse blandit rhoncus tortor, vitae sodales sem eleifend in. Aenean vitae semper neque. Aliquam maximus tristique quam suscipit condimentum. Mauris mollis nec metus et dictum. Nam quis pulvinar elit, sit amet auctor f
</div>
</div>
<script>
function showMenu1130660554() {
if ($('1130660555').hasClass('showMenu')) {
$('1130660555').removeClass('showMenu');
}
else {
$('1130660555').addClass('showMenu');
}
}
</script>
<div class="task">
<div class="taskControlAndTitle">
<p>Kampeerplekken</p>
<input type="checkbox" id="1277535331" onclick="showMenu1277535331()">
<label for="1277535331">
<img src="mainsource/img/menu.svg">
</label>
<div id="1277535332" class="display: hidden">
hey
</div>
</div>
<div class="taskBody">
<div class="taskTime">10:00 | 12:00</div>
<div class="divider"></div>
Zoek wildkampeerplekken
</div>
</div>
<script>
function showMenu1277535331() {
if ($('1277535332').hasClass('showMenu')) {
$('1277535332').removeClass('showMenu');
}
else {
$('1277535332').addClass('showMenu');
}
}
</script>
<div class="task">
<div class="taskControlAndTitle">
<p>Mail</p>
<input type="checkbox" id="1484908321" onclick="showMenu1484908321()">
<label for="1484908321">
<img src="mainsource/img/menu.svg">
</label>
<div id="1484908322" class="display: hidden">
hey
</div>
</div>
<div class="taskBody">
<div class="taskTime">18:00 | 19:00</div>
<div class="divider"></div>
Sturen mail voor het vrij vragen voor de komende vakantie. Kijken of ik heel augustus weg kan blijven bij vhb zodat ik erg veel rust kan nemen en tot mijzelf kan komen. Mail moet natuurlijk wel uiterlijk morgen worden verstuurd anders heb ik een groot probleem. Daarnaast moet ik morgen ook nog steeds mijn fiets naar de fietsenmaker brengen.
</div>
</div>
<script>
function showMenu1484908321() {
if ($('1484908322').hasClass('showMenu')) {
$('1484908322').removeClass('showMenu');
}
else {
$('1484908322').addClass('showMenu');
}
}
</script>
</div>
</div>
<div class="day">
<div class="dayTitle">
Saturday
</div>
<div class="taskList">
<p>21 July</p>
<div class="task">
<div class="taskControlAndTitle">
<p>Test</p>
<input type="checkbox" id="608646891" onclick="showMenu608646891()">
<label for="608646891">
<img src="mainsource/img/menu.svg">
</label>
<div id="608646892" class="display: hidden">
hey
</div>
</div>
<div class="taskBody">
<div class="taskTime">13:00 | 14:00</div>
<div class="divider"></div>
Test
</div>
</div>
<script>
function showMenu608646891() {
if ($('608646892').hasClass('showMenu')) {
$('608646892').removeClass('showMenu');
}
else {
$('608646892').addClass('showMenu');
}
}
</script>
<div class="task">
<div class="taskControlAndTitle">
<p>Afspraak Ali</p>
<input type="checkbox" id="1059759060" onclick="showMenu1059759060()">
<label for="1059759060">
<img src="mainsource/img/menu.svg">
</label>
<div id="1059759061" class="display: hidden">
hey
</div>
</div>
<div class="taskBody">
<div class="taskTime">16:00 | 17:00</div>
<div class="divider"></div>
Activeren van office.
</div>
</div>
<script>
function showMenu1059759060() {
if ($('1059759061').hasClass('showMenu')) {
$('1059759061').removeClass('showMenu');
}
else {
$('1059759061').addClass('showMenu');
}
}
</script>
<div class="task">
<div class="taskControlAndTitle">
<p>Stuk fietsen</p>
<input type="checkbox" id="1075112594" onclick="showMenu1075112594()">
<label for="1075112594">
<img src="mainsource/img/menu.svg">
</label>
<div id="1075112595" class="display: hidden">
hey
</div>
</div>
<div class="taskBody">
<div class="taskTime">10:00 | 11:00</div>
<div class="divider"></div>
Stuk fietsen van papendrecht en terug.
</div>
</div>
<script>
function showMenu1075112594() {
if ($('1075112595').hasClass('showMenu')) {
$('1075112595').removeClass('showMenu');
}
else {
$('1075112595').addClass('showMenu');
}
}
</script>
</div>
</div>
</div>
</div>
</body>
答案 0 :(得分：0)
它出现在脚本中您忘记包含选择器的代码的一部分。
由于$DropdownId是HTML中的ID，因此您需要在名称前添加#。
所以像这样的$('#$DropdownId').addClass('showMenu');之类的东西我不确定是否会导致PHP问题，因为自从我写php以来已经很久了。但是仅仅从它看来，这似乎就是您所缺少的。