Как показать текст insite <td>через ссылку для прессы внутри <td> - PullRequest
Новая
       29

Как показать текст insite <td>через ссылку для прессы внутри <td>

0 голосов
/ 18 декабря 2009

У меня есть код: 

<table id="table_id">
  <tr id="tr_id">
     <td id="td_id">
         <p id="tresc"> text </p>
         <a href="#" id="link">more1</a>
         <p id="tresc_more" style="display:none"> more text 1</p>
     </td>
  </tr>
  <tr id="tr_id">
     <td id="td_id">
         <p id="tresc"> text </p>
         <a href="#" id="link">more2</a>
         <p id="tresc_more" style="display:none"> more text 2 </p>
     </td>
  </tr>


  $(document).ready(
  function()
  {
   $("table#table_id tr td a#link").click(
   function()
   {
     $("table#table_id tr td p#tresc_more").toggle();
   });
  });

Проблема: Когда я нажимаю на ссылку «more1», она показывает весь скрытый текст в каждой строке, я хочу видеть скрытый текст только в одной строке, которую я нажимаю (например: когда я нажимаю more2, я хочу увидеть » больше текста 2 ").

Ответы [ 6 ]

3 голосов
/ 18 декабря 2009

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

Идентификаторы должны быть уникальными, имена классов могут использоваться повторно.

Изменения: 

<table id="table_id">
  <tr class="tr_class">
    <td class="td_class">
      <p class="tresc"> text </p>
      <a href="#" class="link">more1</a>
      <p class="tresc_more" style="display:none"> more text 1</p>
    </td>
  </tr>
  <tr class="tr_id">
    <td class="td_id">
      <p class="tresc"> text </p>
      <a href="#" class="link">more2</a>
      <p class="tresc_more" style="display:none"> more text 2 </p>
    </td>
  </tr>
</table>

И JS: 

$(document).ready(function() {
  $("table#table_id tr td a.link").click(function() {
    $(this).next(".tresc_more").toggle();
  });
});

$ (this) .next (". Tresc_more"). Toggle (); найдет следующий объект с этим классом и переключит его.

1 голос
/ 18 декабря 2009

Внутри функции, к которой вы привязываетесь click, это переключит первый элемент, который следует по нажатой ссылке: 

$(this).next().toggle();

Это переключит первый элемент p, следующий за нажатой ссылкой: 

$(this).next('p').toggle();

Поскольку вы привязываете функцию к событию щелчка ссылки, вы можете ссылаться на ссылку внутри этой функции, используя this (или $(this), если вы хотите выполнить над ней действия jQuery).

1 голос
/ 18 декабря 2009 
$(this).next().toggle();
0 голосов
/ 18 декабря 2009

Я взял немного свободы с твоим кодом. Вот разметка и jquery: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0   Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="../Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .moreInfo
        {
            background-color: #f9f9f9;
        }

        .linkLook {color: #0000ff; cursor: pointer; text-decoration: underline;}
    </style>
</head>
<body>
    <table id="displayTable">
        <tbody>
            <tr>
                <td>
                    <p>
                        Show More</p>
                    <div class="moreInfo">
                        More Information to be displayed.
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        Show More</p>
                    <div class="moreInfo">
                        More Information to be displayed.
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        Show More</p>
                    <div class="moreInfo">
                        More Information to be displayed.
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function() {

        $('table#displayTable:eq(0) .moreInfo').hide();        
        $('table#displayTable:eq(0)> tbody td>p').addClass('linkLook');
        $('table#displayTable:eq(0)>  tbody td>p').click(function() {
            $(this).next().toggle();
        });
    });
</script>

</html>

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

Надеюсь, это поможет некоторым.

0 голосов
/ 18 декабря 2009

Вы можете взять дочерний элемент узла, на который вы щелкнули, например: 

   $("table#table_id tr td a#link").click(
   function()
   {
     $(this).siblings("#tresc_more").toggle()
   });
  });
0 голосов
/ 18 декабря 2009

Изменить на 

<table id="table_id">
  <tr class="tr_id">
     <td class="td_id">
         <p class="tresc"> text </p>
         <a href="#" class="link">more1</a>
         <p class="tresc_more" style="display:none"> more text 1</p>
     </td>
  </tr>
  <tr class="tr_id">
     <td class="td_id">
         <p class="tresc"> text </p>
         <a href="#" class="link">more2</a>
         <p class="tresc_more" style="display:none"> more text 2 </p>
     </td>
  </tr>
</table>

и 

  $(document).ready(
  function()
  {
   $("table#table_id tr td a.link").click(
   function()
   {
     $(this).next('p').toggle();
   });
  });

используйте next ('p'), так что если вы добавите еще один тег между ссылкой и абзацем, код, скорее всего, будет работать, если вы не добавите еще один абзац между;)

И как уже упоминалось в другом посте. Атрибут ID уникален в каждом HTML-документе. Вы не можете иметь несколько одинаковых значений

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...