显示当前文件输入有文件后的下一个文件输入

Show next file input after current file input has a file

本文关键字：文件 输入 下一个 显示      更新时间：2024-02-22

我试图显示第一个列表项，然后当第一个输入文件选择了一个文件时，我想显示下一个列表项等等，我一直有问题。我应该如何处理？

<li id="0"><input size="30" name="images[]" class="my-input-file" type="file"></li>
<li id="1"><input size="30" name="images[]" class="my-input-file" type="file"></li>
<li id="2"><input size="30" name="images[]" class="my-input-file" type="file"></li>
<li id="3"><input size="30" name="images[]" class="my-input-file" type="file"></li>
<li id="4"><input size="30" name="images[]" class="my-input-file" type="file"></li>
<li id="5"><input size="30" name="images[]" class="my-input-file" type="file"></li>
<li id="6"><input size="30" name="images[]" class="my-input-file" type="file"></li>
<li id="7"><input size="30" name="images[]" class="my-input-file" type="file"></li>
<li id="8"><input size="30" name="images[]" class="my-input-file" type="file"></li>
<li id="9"><input size="30" name="images[]" class="my-input-file" type="file"></li>

最初隐藏所有输入元素，然后将事件侦听器附加到输入元素。如果指定了文件，则会显示父li元素的下一个同级元素。

此处示例

$('ul>li:not(:first)').hide();
$('ul>li>input').on('change', function () {
    if (this.value) {
        $(this).parent().next().show();
    }
});

若您想确定之前显示的元素之一是否发生了更改，并且文件是否未被选中，可以使用以下方法：

此处示例

$('ul>li:not(:first)').hide();
$('ul>li>input').on('change', function () {
    if (this.value) {
        $(this).parent().next().show();
    }
    $(this).closest('ul').find('li').prevAll().find('input').filter(function () {
        return !this.value;
    }).parent().nextAll().hide();
});
相关文章：