Элемент управления HTML с помощью JQuery

Question

Я пытаюсь сделать что-то действительно практичное.

<table class="annplain" cellspacing="0" cellpadding="15" width="325"> 
     <tbody> 
      <tr> 
      <td><p><strong><a href="#Title" class="Title">Title</a></strong><br /> 
       <span class="annfrom">date<br /> 
       </span> 
        <span class="content">.</span> 
     <br /> 
       <br /> 
      </p></td> 
      </tr> 
     </tbody> 
     </table> 

Title 
Information – 05/11/2009 at 15:30 

У меня есть много такого рода HTML-таблица, генерирующая мой PHP-код. Я должен сначала скрыть весь контент в разделе, люди могут видеть только заголовок. И затем, когда люди нажимают на заголовок, я хочу отобразить содержимое тега span.

Я использовал функцию toggle с jQuery для работы в качестве переключателя для содержимого Span. Мой вопрос: как я могу сделать это для всей таблицы вместо жесткого кода, например

$(".title").click(function() { 
       $(".content").toggle(); 

      }); 

$(".title1").click(function() { $(".content2").toggle(); 

      }); 

Для всего моего стола.

Спасибо, я с нетерпением жду вашего совета.

Answer 1

Почему бы не использовать div для заголовка и div для таблицы (без заголовка).

Скрыть/показать div, который содержит таблицу, когда вы нажимаете заголовок.

С уважением.

Answer 2

Предполагая, что вы используете класс Title для всех ваших таблиц, то вы можете сделать это:

$(".Title").click(function() { 
    $(".content",$(this).closest("td")).toggle(); 
}); 

$ (это) .closest («тд») приведет вас к тд и, таким образом, ограничить диапазон выбора содержимого, который находится под заголовком, который был нажат.

Answer 3

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

Так вы HTML должны быть таким:

<table class="annplain" cellspacing="0" cellpadding="15" width="325"> 
      <tbody> 
       <tr> 
       <td><p><strong><a href="#Title1" class="title">Title 1</a></strong><br /> 
        <span class="annfrom">date<br /> 
        </span> 
         <span class="content"> Content 1 </span> 
<br /> 
        <br /> 
       </p></td> 
       </tr> 
       <tr> 
       <td><p><strong><a href="#Title2" class="title">Title 2</a></strong><br /> 
        <span class="annfrom">date<br /> 
        </span> 
         <span class="content"> Content 2 </span> 
<br /> 
        <br /> 
       </p></td> 
       </tr> 
      </tbody> 
      </table> 

И ваш код JQuery должен выглядеть следующим образом:

$(".title").click(function() { 
    var aParentTD = $(this).closest("td"); 
    var aContent = aParentTD.find(".content"); // Content in the same TD with Title 
    aContent.toggle(); 
});

Надеется, что это помогает.