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

Question

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

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

Answer 1

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

Example Here

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

<小时/>

如果您想确定先前显示的元素之一是否发生更改并且文件未被选择，您可以使用以下命令:

Example Here

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