如何通過新聞鏈接顯示內部

-1

<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」）。

來源

2009-12-18 Mariola

蝙蝠的一個問題是您使用的是非唯一的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(); 
    }); 
});

$（本）。接下來（「tresc_more」）切換（）;將找到該類的下一個對象並將其切換。

來源

2009-12-18 18:54:57 Aaron

+1爲重用性 – Patrick 2009-12-18 19:09:13

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

來源

2009-12-18 18:55:56

在你結合click的功能，這將觸發下面的被點擊鏈接的第一個元素：

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

這將觸發下面的被點擊鏈接第一p元素：

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

由於您將函數綁定到鏈接的單擊事件，因此可以使用引用該函數內的鏈接（或$(this)如果您想對其執行jQuery操作）。

來源

2009-12-18 18:56:40

編輯

<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(); 
    }); 
    });

下次使用（「P」），所以如果你添加鏈接和段落之間的另一個標籤的代碼將最有可能的工作，至於你不添加另一段落;）

而且在另一篇文章中提到。 ID屬性是每一個HTML文檔中是唯一，你不能有多個具有相同值

來源

2009-12-18 19:00:43 ThoKra

你可以把你點擊例如節點的兄弟姐妹的孩子：

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

來源

2009-12-18 19:05:28 Patrick

我花了一點自由與您的代碼。這裏是標記和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的切換功能。我認爲你遇到的主要問題是走DOM的表格和你想要點擊和隱藏的信息。

希望這有助於一些。

來源

2009-12-18 19:55:08 Chris

如何通過新聞鏈接顯示內部​​

回答

相關問題

如何通過新聞鏈接顯示內部