Question

使用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>

Answer 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/的工作代码

Answer 2

如果您在行中找到按钮，则可以执行以下操作：

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

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

切换具有相同的类名

2 个答案: