javascript - 如何仅针对同一个父级通过按钮隐藏/显示字段

Question

我有以下代码结构，如何单击编辑按钮来仅显示/隐藏该表的 3 个文件输入字段？

默认情况下，所有这些文件输入字段都是隐藏的。如果我按下第二个表内的编辑按钮，则仅显示第二个表内的 3 个输入。

     <table>
        <input type="file" name="product" class="editThis" />
        <input type="file" name="color" class="editThis" />
        <input type="file" name="price" class="editThis" />

        <span class="editButton"></span>
    </table>

    <table>
        <input type="file" name="product" class="editThis" />
        <input type="file" name="color" class="editThis" />
        <input type="file" name="price" class="editThis" />

        <span class="editButton"></span>
    </table>

    <table>
        <input type="file" name="product" class="editThis" />
        <input type="file" name="color" class="editThis" />
        <input type="file" name="price" class="editThis" />

        <span class="editButton"></span>
    </table>

我在网上找到的大多数示例都使用 getElementbyID，所以我有点卡住了。

谢谢

拍拍

Answer 1

我认为最好的解决方案是使用 JQuery 来实现，而不是直接使用 Javascript。

EDIT2:好的，一切都完全解决了! http://jsfiddle.net/3QYhQ/

Jquery 在这里:

$(".editButton").click(function () {
    var x = $(this).attr("group");
    $('.' + x).css("visibility", "visible");
});

这表示，每当单击 .editButton 时，都会获取属性 group 并获取其值。现在去找到任何具有该组所具有的任何值的类名的东西，并使其可见。

<input type="button" class="editButton" group="editGroup1" value="Edit" />
<input type="text" name="product" class="editGroup1 editGroup" />
<input type="text" name="color" class="editGroup1 editGroup" />
<input type="text" name="price" class="editGroup1 editGroup" />

<input type="button" class="editButton" group="editGroup2" value="Edit" />
<input type="text" name="product" class="editGroup2 editGroup" />
<input type="text" name="color" class="editGroup2 editGroup" />
<input type="text" name="price" class="editGroup2 editGroup" />

这是 html。本质上，所有隐藏的输入都有两个类 - 一个将它们绑定(bind)到需要使用的编辑按钮，另一个由下面的 CSS 使用的通用类名称:

.editGroup {
    visibility:hidden;
}

希望对您有所帮助!

如果有人可以用 .child() 或类似的东西做一些更奇特的事情(我不太熟悉使用这些)，请随时分享您的答案!