Javascript 显示/隐藏sql数据库中的动态id

子菜单部分

        <div id="subnavigation">
            <?php
            $verbindung = mysql_connect("host", "user" , "pw") 
            or die("Verbindung zur Datenbank konnte nicht hergestellt werden"); 

            mysql_select_db("db") or die ("Datenbank konnte nicht ausgewählt werden");

            $sub_instr = mysql_query("SELECT * FROM instrument ORDER BY InstrName");

            while($sub = mysql_fetch_assoc($sub_instr))
            {?>
            <div class="sub-item">
                <p>
                    <button type="button" id="<? echo $sub["InstrID"] ?>" class="submenu-button"><? echo $sub["InstrName"] ?></button>
                </p>
            </div><?
            }?>
        </div>

第一个代码示例描述了如何使用sql数据库中的ID生成按钮列表。因此，每个按钮都有来自fitting数据库条目的唯一ID

第二个代码示例描述了一个由数据库条目生成的表，每个表都从fitting数据库条目获得一个唯一的ID

第三个代码示例应该获取我单击的按钮的ID，获取与按钮ID相同的表，隐藏所有表，只显示与按钮ID相同的表

问题是，它不会显示任何内容。它只是隐藏了所有的表

---

让您知道，我对javascript/jQuery完全陌生。

元素的ID必须是唯一的（现在您有一个具有相同ID的表和按钮），所以在按钮中使用data-*属性来存储目标元素ID

<button type="button" data-target="<? echo $sub["InstrID"] ?>" class="submenu-button"><? echo $sub["InstrName"] ?></button>

---

非常感谢你！这就是问题的症结所在。我想，如果我将ID附加到不同的标签上，就可能会有不同的ID。非常感谢您向我展示数据属性，这将在将来有很大帮助。

$(document).ready(function ()
{
    $('.sub-item p button').click(function ()
    {
        var buttonID = $(this).attr('id');
        alert('table#' + buttonID);
        $('table.hidden').hide();
        $('table#' + buttonID).show();

    });

});

<button type="button" data-target="<? echo $sub["InstrID"] ?>" class="submenu-button"><? echo $sub["InstrName"] ?></button>

var buttonID = $(this).data('target');