Question

一旦选择了上一个文件，我想要显示不同的文件输入。目前我有

<div class="row">
    <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
        <div class="input-group inputMargBtm">
            <input type="text" class="form-control" id="fileOneContainer" readonly>
            <span class="input-group-btn">
                <span class="btn btn-primary btn-file">
                    Browse&hellip; <input type="file" id="fileOne" name="fileOne" class="fileGroup" accept=".jpeg,.jpg">
                </span>
            </span>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
        <div class="filePadd">
            <div class="input-group">
                <div id="hideDivTwo" class="hiddenDiv">
                    <input type="text" class="form-control" id="fileTwoContainer" readonly>
                    <span class="input-group-btn">
                        <span class="btn btn-primary btn-file">
                            Browse&hellip; <input type="file" id="fileTwo" name="fileTwo" class="fileGroup" accept=".jpeg,.jpg" disabled="true">
                        </span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

但是我还有更多隐藏行，最多可以输入10个输入。所以我不需要为我的Javascript中的每个输入创建新代码，我试图动态显示内容。基本上，如果我选择一个文件，它应该显示下一个文件输入。

目前我有这个

$(".fileGroup").on('change',function(){
    var id = $(this).attr('id');
    if (id.length) {
        $(this).parents('.row').nextSibling('.row').child('.hiddenDiv').css("display", "table-footer-group");
    }
});

所以我得到了更改后的fileGroup的id。然后我尝试让它的父母排，然后得到下一行，并显示其隐藏的div。目前这似乎不起作用。显示下一个输入块的最佳方法是什么？

由于

Answer 1

尝试使用此代码：

$(".fileGroup").on('change',function(){
var $next_element = $(this).parents('.row').next('.row').find('input[type="file"]');
if ($next_element.length) {
  $next_element.prop('disabled', false);
}
});

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

<div class="row">
    <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
        <div class="input-group inputMargBtm">
            <input type="text" class="form-control" id="fileOneContainer" readonly>
            <span class="input-group-btn">
                <span class="btn btn-primary btn-file">
                    Browse&hellip; <input type="file" id="fileOne" name="fileOne" class="fileGroup" accept=".jpeg,.jpg">
                </span>
            </span>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
        <div class="filePadd">
            <div class="input-group">
                <div id="hideDivTwo" class="hiddenDiv">
                    <input type="text" class="form-control" id="fileTwoContainer" readonly>
                    <span class="input-group-btn">
                        <span class="btn btn-primary btn-file">
                            Browse&hellip; <input type="file" id="fileTwo" name="fileTwo" class="fileGroup" accept=".jpeg,.jpg" disabled="true">
                        </span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

代码很简单：
1.抓住.row父母 2.使用.row类来查找下一个元素 3.在下一个.row元素中查找文件输入
4.如果输入存在，则将其disabled属性设置为 false

根据不同因素显示最近的div

1 个答案: