Javascript 如何仅为同一父项按按钮隐藏/显示字段

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

<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();                                           
                        });

默认情况下，所有这些文件输入字段都是隐藏的。 如果我按下第二个表格内的编辑按钮，则仅显示第二个表格内的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>

<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();                                           
                        });

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

谢谢

---

Pat

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

EDIT2:好吧，一切都解决了

Jquery在这里：

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

这意味着，无论何时单击

.editButton

，都可以获取属性

组

，并获取其值。现在，找到任何具有该组具有的任何值的类名的对象，并使其可见

<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" />

<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();                                           
                        });

我希望这有帮助

如果有人能用

.child（）

或类似的东西做一些更有趣的事情（我不太擅长使用这些），请随时分享你的答案

试试这个，看看

编辑

<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();                                           
                        });

编辑
<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();                                           
                        });

编辑
<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();                                           
                        });

$（'.editButton'）。单击（函数（）
<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();                                           
                        });

{
$（this.sides（'.editThis'）.toggle（）；
<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();                                           
                        });

});

我建议为每个输入产品组使用不同的类名，并使用该功能。我还建议使用

display:none

从页面中删除

input

元素，然后使用

display:block

插入它们

下面是一个纯JavaScript示例（）：

HTML:

---

}

除了“文件输入和编辑”按钮之外，您的标记无效（这不是您使用表格的方式），我还喜欢同一个div中的其他按钮和输入，它们也都得到了切换。有没有办法只切换拥有class=“editThis”的人？

<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();                                           
                        });