Question

我有代码：

<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”链接时，它显示了我在每一行中的所有隐藏文字，我希望只在一行中看到隐藏文本，我点击一行（例如：当我点击更多2我想看到时“更多文字2“）。

Answer 1

立即出现的一个问题是您使用的是非唯一ID名称。

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（）; 会找到该类的下一个对象并进行切换。

Answer 2

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

Answer 3

在您绑定到click的函数中，这将切换点击链接后面的第一个元素：

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

这将切换点击链接后面的第一个p元素：

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

由于您正在将函数绑定到链接的click事件，因此您可以使用this（或$(this)如果要对其执行jQuery操作）引用该函数中的链接。

Answer 4

编辑

<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文档中都是唯一的，您不能拥有具有相同值的多个

Answer 5

您可以选择已点击的节点的兄弟孩子，例如：

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

Answer 6

我对你的代码采取了一点自由。这是标记和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>

正如您所看到的，我将超链接更改为只是简单的段落，并为每个将执行jquery切换功能的事件添加了一个click事件。我认为你遇到的主要问题是走DOM表格以及你想要点击和隐藏的信息。

希望这会有所帮助。

如何通过内部的按键链接显示文本

6 个答案: