Question

所以我的数据库有一个表，其中有一列id。我的index.php页回显了各个div中id的所有数据库行。

单击的按钮元素的类名称为：

"mainbut<?php echo $id->rqvid; ?>"

隐藏的div元素的类名称为：

"subdiv<?php echo $id->rqvid; ?>"

我要实现的是单击mainbut<?php echo $id->rqvid; ?>，然后显示subdiv<?php echo $id->rqvid; ?>。用更简单的术语来说-单击按钮（行id）时，将显示一个隐藏的div（行id）。

我想要实现的视觉呈现：

注意：四个1代表数据库中列id的行

----------------
| 1 [mainbut1] | <-- when [mainbut1] is clicked on
----------------
| 1 (subdiv1)  | <-- then div of classname "subdiv1" shows
----------------

例如，我的表中有3行ID为1到3的ID。但是，当我单击任何按钮时，它将不会显示具有相同ID的隐藏div元素。相反，它仅显示最后一行id 中的一个隐藏的div元素。所以这就是我得到的结果：

---------------- | 1 [mainbut1] | <-- when [mainbut1] is clicked on... ---------------- <-- (div "subdiv1" does not show. Why?) ---------------- | 2 [mainbut2] | ---------------- ---------------- | 3 [mainbut3] | ---------------- | 3 (subdiv3) | <-- But instead div "subdiv3" shows. ----------------

我希望能够单击任何按钮，并且仅显示具有相同ID 的相应隐藏div 。我认为我的jQuery代码肯定缺少某些内容。有人可以帮我解决这个问题吗？这是我当前的代码：

<?php foreach($ids as $id): ?> <div> <?php echo $id->rqvid; ?> <button class="mainbut<?php echo $id->rqvid; ?>">click</button> </div> <div class="subdiv<?php echo $id->rqvid; ?>"> <?php echo $id->rqvid; ?> sub-box </div> <script> var i = '<?php echo $id->rqvid; ?>'; $(".mainbut"+i).on('click', function() { $(".subdiv"+i).css("display","block"); }); </script> <?php endforeach; ?>

Answer 1

只需生成类似以下HTML的内容：

<?php foreach ($ids as $id) { ?>
<button onclick="$('#subdiv_<?php echo $id->rqvid ?>').toggle();">
    toggle ID <?php echo $id->rqvid ?>
</button>

<div id="subdiv_<?php echo $id->rqvid ?>">
    ID <?php echo $id->rqvid ?>: sub-box
</div>
<?php } ?>

说明：jQuery的$('#element_id')返回ID为element_id的元素，对该元素的toggle()的调用将切换该元素的可见性。只需确保具有唯一的ID，就像生成类名一样。

您可以测试前端部分here。

P.S .：与PHP无关，只是HTML和jQuery问题。

单击一个div（具有表ID的类名）以显示隐藏的div（具有表ID的类名）

1 个答案: