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');

用动态id显示/隐藏sql数据库

1 个答案: