2

私は次のコードを持っています：

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Untitled Page</title>
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".Note").click(function(){
        $(this).parent().parent().next(".divNote").slideToggle();
        });
    });
    </script>

  </head>
  <body>
    <table>
        <tr>
            <td class="Note" style="cursor: pointer">
                <font size="3" color="#800080"><b><u>TD</u></b> </font>
            </td>
        </tr>
    </table>
    <br />
    <div style="display: none" class="divNote">
    </div>
  </body>
</html>

なぜ機能しないのか理解できます。

例：ここ

どんな助けでも。

4

6 に答える 6

6

なぜうまくいかないのか説明させてください

next()一致する要素のみを除外するフィルターを関数に追加しました。あなたの場合br、一致するクラス名を持たない要素（）が1つしか含まれていなかったため、結果のセットはゼロ要素に切り捨てられました。

それを機能させる方法

したがって、単にnext要素をフィルタリングする代わりに、すべての兄弟から除外する必要があります。

$(document).ready(function() {
  $(".Note").click(function(){
    $(this).parents("table").siblings(".divNote").slideToggle();
  });
});

または、次のすべての兄弟から除外します（前の兄弟がまったく関連していない場合）

$(document).ready(function() {
  $(".Note").click(function(){
    $(this).parents("table").nextAll(".divNote").slideToggle();
  });
});
于 2010-11-23T17:50:11.250 に答える
4

$('document')null参照です。documentという名前のHTML要素ではなく、オブジェクトを参照するように引用符を削除します。

その後、動作するはずです。また、jQuery libを含め、DOCTYPEを含めてください...

編集：スクリプトにいくつかの問題があります。私はそれを次のように調整しました：

$(document).ready(function() {

$(".Note").click(function(){
        $(this).closest('table').nextAll("div.divNote").slideToggle();
        });

});

trtbody通常それを所有しています。最も近いものを使用することをお勧めします。また、あなたに要素nextを与えます、の要素は... </ p> nextnexttablebr

于 2010-11-23T17:35:44.997 に答える
2

ここでは多くのことが間違っています。

まず、jQueryは含まれていません。追加してjQueryを含める

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

あなたの頭のタグに。

次に、$(document)引用符なしで参照する必要があります。

一部のブラウザ（Firefoxでテスト済み）は、tbody要素を自動的に挿入します。これを確認するには、を実行しconsole.log($(this).parent().parent())ます。

解決策は$(this).parents("table").nextAll(".divNote").slideToggle();

于 2010-11-23T17:38:58.937 に答える
2

問題は、parent（）とnext（）の両方です。（HTMLでjQueryをソースとして使用していて、上記のコードは読みやすくするためにトリミングされていると想定しています。）

.parent（）。parent（）の問題は、ブラウザによって.parent（）。parent（）としてレンダリングされることです。HTMLによって暗示されている余分なものに注意してください。これは.parent（）。parent（）。parent（）を介して解決できますが、より堅牢な解決策は.parents（'table'）を使用することです。

そしてnext（）の場合：

一致した要素のセット内の各要素の直後の兄弟を取得します。セレクターが提供されている場合、そのセレクターと一致する場合にのみ、次の兄弟を取得します。

次の兄弟は
、クラス「.divNote」を持たないです。したがって、セレクターは何も返しません。代わりにnextAll（）を使用します。

これらすべてをまとめて...

$(".Note").click(function(){
    $(this).parents('table')
         .nextAll(".divNote").slideToggle();
});

ここでjsFiddleを動作させる：http：//jsfiddle.net/6WrjH/

于 2010-11-23T17:51:44.247 に答える
0

そこにjqueryライブラリを含めていません。これがないと、jqueryコードは機能しません。

于 2010-11-23T17:36:02.630 に答える
0

ページにjQueryへの参照を含めていません...先頭に追加してください

[編集]あなたが持っているものは、表示されていない空のdivでslideToggleを実行しているため、何も表示されていません。divが表示され、高さが表示されるようにスタイルを変更すると、スライドトグルで問題ありません。

また、次のようにdivNoteの選択を簡略化します。

$(".divNote").slideToggle("slow");

問題は必ずしもparent（）とnext（）にあるとは限りませんが、非表示のエンティティで作業していることが問題です。

于 2010-11-23T17:37:15.933 に答える