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。基本上，所有隐藏的输入都有两个类 - 一个绑定到他们需要使用的编辑按钮，另一个通用类名由CSS使用：

.editGroup {
    visibility:hidden;
}

我希望有所帮助！

如果有人可以使用.child()或类似的东西做更多的事情（我不太精通使用它们），请随时分享您的答案！

Answer 2

试试这个并查看demo

编辑

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

    <span class="editButton">edit</span>
</div>

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

    <span class="editButton">edit</span>
</div>

$('.editButton').click(function()
                       {
                           $(this).siblings('.editThis').toggle();                                           
                        });

Answer 3

我建议为每个产品组输入一个不同的类名，并使用getElementsByClassName()函数。我还建议您使用display:none从页面中删除input个元素，然后使用display:block插入它们。

这是一个纯JavaScript示例（jsfiddle demo）：

HTML：

<table width="100%">
<th>Product 2</th>
<tr>
    <td id="product_2_edit_button" onclick="my_function()">edit</td>
    <tr>
        <td>
            <input style="display:none" type="file" name="product" class="product_2_field" />
            <input style="display:none" type="file" name="color" class="product_2_field" />
            <input style="display:none" type="file" name="price" class="product_2_field" />
        </td>
    </tr>

JS：

function my_function() {
var testing = document.getElementsByClassName("product_2_field");
testing[0].style.cssText = "display:block";
testing[1].style.cssText = "display:block";
testing[2].style.cssText = "display:block";

}

如何通过按钮为同一个父母隐藏/显示字段

3 个答案: