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

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

1 个答案: