показать/скрыть с динамическим идентификатором из базы данных SQL

Question

Submenu Часть

 <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. Таким образом, каждая кнопка имеет уникальный идентификатор, поступающий из записи базы данных подгонки.

Второй пример кода описывает таблицу, сгенерированную из записей базы данных, каждая таблица получает уникальный идентификатор, поступающий из записи базы данных подстановки.

Третий пример кода должен получить идентификатор кнопки, которую я нажимаю, получить таблицу с тем же идентификатором, что и кнопка, скрыть все таблицы и показать только таблицу с тем же идентификатором, что и кнопка.

Проблема в том, что она не будет показывать никаких. Он просто скрывает все таблицы ...

Просто, чтобы сообщить вам, я совершенно не знаком с javascript/jQuery.

Answer 1

ID элемента должен быть уникальным (теперь у вас есть таблица и кнопка с тем же идентификатором), поэтому используйте атрибут data- * в кнопке, чтобы сохранить идентификатор целевого элемента.

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

затем в обработчик щелчка

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