Javascript 在当前文件输入具有文件后显示下一个文件输入

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

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