-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」をクリックすると、すべての行にすべての非表示のテキストが表示されます。非表示のテキストを表示したいのは、クリックした 1 つの行だけです (たとえば、more2 をクリックすると、「more text 2 が表示されます」 」）。

4

6 に答える 6

3

すぐに発生する問題の 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(); そのクラスの次のオブジェクトを見つけて切り替えます。

于 2009-12-18T18:54:57.753 に答える
1 
$(this).next().toggle();
于 2009-12-18T18:55:56.113 に答える
1

にバインドしている関数内でclick、これはクリックされたリンクに続く最初の要素を切り替えます:

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

pこれにより、クリックされたリンクに続く最初の要素が切り替わります。

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

関数をリンクのクリック イベントにバインドしているため、その関数内でthis(または$(this)jQuery アクションを実行する場合) を使用してリンクを参照できます。

于 2009-12-18T18:56:40.493 に答える
0

たとえば、クリックしたノードの兄弟の子を取得できます。

   $("table#table_id tr td a#link").click(
   function()
   {
     $(this).siblings("#tresc_more").toggle()
   });
  });
于 2009-12-18T19:05:28.870 に答える
0

私はあなたのコードを少し自由にしました。マークアップと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-18T19:55:08.863 に答える
0

に編集

<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 ドキュメントで一意です。同じ値を複数持つことはできません

于 2009-12-18T19:00:43.387 に答える