Question

我有两个文件输入。如果他们都选择了文件，我希望#next2 div切换。

我不确定我做错了什么。我是否正确选择了多少输入的长度？

感谢任何帮助。

jQuery.fn.fadeBoolToggle = function(bool) {
  return bool ? this.fadeIn(400) : this.fadeOut(400);
}
$(".upload-img[type='file']").change(function () {
         var files = $(this).prop("files");
         $('#next2').fadeBoolToggle($(files).length == 2).addClass('block');
     });

#next2 {
  display: none;
}
.block {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="POST" enctype="multipart/form-data" runat="server">
  <input type="file" id="brokerage-logo-input" class="upload-img">
  <input type="file" id="personal-pic-input" class="upload-img">
</form>
<div class="proceed-btn sans-pro" id="next2"><span class="proceed-btn-text">PROCEED</span></div>

Answer 1

我不确定我做错了什么。

您只检查.files元素的this属性，如果用户选择了文件，则1为multiple，但未设置.files属性。您没有检查每个<input type="file">元素的input属性。

您可以创建Array.prototype.every()元素数组，使用.files迭代每个input元素的Boolean属性，返回.files.length <input type="file">评估两个jQuery.fn.fadeBoolToggle = function(bool) { return bool ? this.fadeIn(400) : this.fadeOut(400); } var inputs = $(".upload-img[type='file']"); inputs.change(function() { var bool = Array.prototype.every.call(inputs, function(input) { return input.files.length }); $('#next2').fadeBoolToggle(bool).addClass('block'); });元素。

＆＃13;

#next2 {
  display: none;
}
.block {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="POST" enctype="multipart/form-data" runat="server">
  <input type="file" id="brokerage-logo-input" class="upload-img">
  <input type="file" id="personal-pic-input" class="upload-img">
</form>
<div class="proceed-btn sans-pro" id="next2"><span class="proceed-btn-text">PROCEED</span>
</div>

＆＃13;

{{1}}

＆＃13;

Answer 2

您可以检查每个输入在$ .each

中是否有值

尝试以这种方式修改脚本并开始工作。

$(".upload-img[type='file']").change(function () {
    var allSelected = 0;
    var numOfInput = $(".upload-img[type='file']").length;
    $.each($(".upload-img[type='file']"), function(idx, val){
        if($(val).val().length){
            allSelected++;
        };
    })

    $('#next2').fadeBoolToggle(allSelected==numOfInput).addClass('block');

 });

检测选择了多少文件输入，一旦达到限制就切换div

2 个答案: