0

トグルにjQueryを使用すると問題が発生します。一部のタグに同じクラス名がある場合、ボタンをクリックしたときにのみ 1 つのイベントを取得したいと考えています。

私のコードの一部を以下に示します。「1」という名前のボタンをクリックすると、「2」と「5」の行が表示されます。これは、同じクラス名「detail」があるためです。ただし、「1」をクリックすると、「2」の行のみを表示したいと思います。

トグル機能を持​​つ行がたくさんあるはずなので、別の名前を使用するつもりはありません。つまり、各タグに多くの名前が必要です。

いくつかの解決策とアドバイスを手伝ってください、ありがとう。

- -脚本 - - 

    <script>
            $(".button").click(function () {
                $(".detail").slideToggle("slow");
            });
            $(".button2").click(function () {
                $(".detail2").slideToggle("slow");
            });
    </script>

---HTML-----

   <table class="w850 table">
        <tr>
            <td class="w50">
                <input type="checkbox" />
            </td>
            <td class="w50">
                <input type="button" value="1" class="button"/>
            </td>
            <td class="w250">
                Scan
            </td>
            <td class="w250">
                Status
            </td>
            <td class="w250">
                Ship Type
            </td>
        </tr>
        <tr class="detail" style="display: none">
            <td class="w50">
                <input type="checkbox" />
            </td>
            <td class="w50">
                <input type="button" value="2" class="button2"/>
            </td>
            <td class="w250">
                Scan
            </td>
            <td class="w250">
                Status
            </td>
            <td class="w250">
                Ship Type
            </td>
        </tr>
        <tr class="detail2" style="display: none">
            <td class="w50">
                <input type="checkbox" />
            </td>
            <td class="w50">
                <input type="button" value="3" />
            </td>
            <td class="w250">
                Scan
            </td>
            <td class="w250">
                Status
            </td>
            <td class="w250">
                Ship Type
            </td>
        </tr>
        <tr>
            <td class="w50">
                <input type="checkbox" />
            </td>
            <td class="w50">
                <input type="button" value="4" class="button"/>
            </td>
            <td class="w250">
                Scan
            </td>
            <td class="w250">
                Status
            </td>
            <td class="w250">
                Ship Type
            </td>
        </tr>
        <tr class="detail" style="display: none">
            <td class="w50">
                <input type="checkbox" />
            </td>
            <td class="w50">
                <input type="button" value="5" class="button2"/>
            </td>
            <td class="w250">
                Scan
            </td>
            <td class="w250">
                Status
            </td>
            <td class="w250">
                Ship Type
            </td>
        </tr>
        <tr class="detail2" style="display: none">
            <td class="w50">
                <input type="checkbox" />
            </td>
            <td class="w50">
                <input type="button" value="6" />
            </td>
            <td class="w250">
                Scan
            </td>
            <td class="w250">
                Status
            </td>
            <td class="w250">
                Ship Type
            </td>
        </tr>
    </table>
4

2 に答える 2

1 
$(".button").click(function () {
    $(this).closest("tr").siblings(".detail:first").slideToggle("slow");
});
$(".button2").click(function () {
    $(this).closest("tr").siblings(".detail2:first").slideToggle("slow");
});

これにより、最初の .detail 行が選択されます

作業コードについては、ここhttp://jsfiddle.net/4KP9Y/2/をご覧ください。

于 2012-04-24T18:54:47.980 に答える
0

ボタンが行にある場合は、おそらく次のようなことができます。

$(".button").click(function() {
  $(this).closest("tr").siblings(".detail2").show()
});

おそらく、DOM をトラバースするための jQuery の関数を見たいと思うでしょう。ここからそこに移動する意味: http://api.jquery.com/category/traversing/

于 2012-04-24T18:58:06.723 に答える