javascript - 显示/隐藏 SQL 数据库中的动态 ID

Question

子菜单部分

        <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>

表格部分

<div class="content-item">
    <!-- Content-Item 1 !-->
    <? $db_instr="SELECT * FROM instrument ORDER BY InstrName" ; $show_instr=m ysql_query($db_instr); while($row=m ysql_fetch_assoc($show_instr)) {?>
    <table id="<? echo $row[" InstrID "] ?>" border="1" class="hidden">
        <tr>
            <th rowspan="6">
                <img border="0" src="<? echo " ../SiteAdministration/ControlCenter/Instr/ ".$row["InstrImage "] ?>" alt="<? echo $row[" InstrName "] ?>" width="400" height="400">
            </th>
            <th colspan="2">Informationen</th>
        </tr>
        <tr>
            <td>Name:</td>
            <td>
                <? echo $row[ "InstrName"] ?>
            </td>
        </tr>
        <tr>
            <td>Klanglage:</td>
            <td>
                <? echo $row[ "InstrKlang"] ?>
            </td>
        </tr>
        <tr>
            <td>Bauschwierigkeit:</td>
            <td>
                <? echo $row[ "InstrBau"] ?>
            </td>
        </tr>
        <tr>
            <td>Materialkosten:</td>
            <td>
                <? echo $row[ "InstrPreis"] ?>
            </td>
        </tr>
        <tr>
            <td>Infotext:</td>
            <td>
                <? echo $row[ "Infotext"] ?>
            </td>
        </tr>
    </table>
    <? }?>
</div>

jQuery

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

    });

});

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

第二个代码示例描述了从数据库条目生成的表，每个表都有一个来自匹配数据库条目的唯一 ID。

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

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

只是想让你知道，我对 javascript/jQuery 完全陌生。

Answer 1

元素的 ID 必须是唯一的(现在您有一个具有相同 id 的表格和按钮)，因此在按钮中使用 data-* 属性来存储目标元素 id。

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

然后在点击处理程序中

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