0

我在使用 jQuery 进行切换时遇到问题。当我对某些标签具有相同的类名时，我希望仅在单击按钮时获得一个事件。

我的一些代码如下，如果我点击一个名为“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()
});

您可能想查看 jQuery 用于遍历 DOM 的函数。意思是从这里到那里：http ://api.jquery.com/category/traversing/

于 2012-04-24T18:58:06.723 回答