单击一个 div（具有表 id 的类名）以显示隐藏的 div（具有相同的表 id 的类名）答案

【问题标题】：Click on a div (with classname of table id) to display hidden div (with same classname of table id)单击一个 div（具有表 id 的类名）以显示隐藏的 div（具有相同的表 id 的类名）
【发布时间】：2019-11-23 05:13:58
【问题描述】：

所以我的数据库有一个包含一列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。但是当我点击任何一个按钮时，它不会显示隐藏的 div 元素相同的 id。相反，它只显示最后一行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; ?>

【问题讨论】：

标签： php jquery for-loop

【解决方案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 的问题。

【讨论】：