Question

我尝试为输入文件创建按钮重置。每次输入文件都有值，然后一个按钮显示重置输入文件。问题是，我有6个输入文件。当我在其中一个输入文件上传图像时，所有按钮都会显示，甚至其他输入文件也没有值。如何具体按钮？

我的代码就像这样

$("#inputFile1").change(function(){
  if($(this).val() == "")
    $('.reset').css({"display": "none"});
  else
    $('.reset').css({"display": "block"});
})
$("#inputFile2").change(function(){
  if($(this).val() == "")
    $('.reset').css({"display": "none"});
  else
    $('.reset').css({"display": "block"});
})
$("#inputFile3").change(function(){
  if($(this).val() == "")
    $('.reset').css({"display": "none"});
  else
    $('.reset').css({"display": "block"});
})

heres jsfiddle https://jsfiddle.net/30uv0kfa/

Answer 1

你可以像

一样

$("#inputFile1,#inputFile2,#inputFile3,#inputFile4,#inputFile5").change(function(){
  if($(this).val() == "")
    $(this).next('.reset').css({"display": "none"});
  else
    $(this).next('.reset').css({"display": "block"});
})

Answer 2

我用input围绕每组button文件和div并简化了您的JS代码。

＆＃13;

$(document).ready(function() {
  $(".input-file").on("change", function(){
    if($(this).val() == "") {
      $(this).parent().find(".reset").css({"display": "none"});
    } else {
      $(this).parent().find(".reset").css({"display": "block"});
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input class="input-file" id="inputFile1" type="file"/>
  <button class="reset" style="display:none">reset</button>
</div>
<div>
  <input class="input-file" id="inputFile2" type="file"/>
  <button class="reset" style="display:none">reset</button>
</div>
<div>
  <input class="input-file" id="inputFile3" type="file"/>
  <button class="reset" style="display:none">reset</button>
</div>
<div>
  <input class="input-file" id="inputFile4" type="file"/>
  <button class="reset" style="display:none">reset</button>
</div>
<div>
  <input class="input-file" id="inputFile5" type="file"/>
  <button class="reset" style="display:none">reset</button>
</div>

＆＃13;

Answer 3

将单个ID设置为按钮可以完成这项工作。检查一下

$("#inputFile1").change(function(){
  if($(this).val() == "")
    $('.reset1').css({"display": "none"});
  else
    $('.reset1').css({"display": "block"});
})

https://jsfiddle.net/30uv0kfa/1/

Answer 4

有一种简单的方法可以做到这一点。我编辑了你的小提琴 JS fiddle URL

$("input[type='file']").change(function(){
  if($(this).val() == "")
    $(this).next('.reset').css({"display": "none"});
  else
    $(this).next('.reset').css({"display": "block"});
});

Answer 5

使用class / attribute选择器代替id来减少冗余
使用.next(SELECTOR)立即选择匹配元素集中每个元素的后续兄弟
使用toggle(BOOLEAN)来播放reset按钮的可见性，而不是.css方法

$('[type="file"]').change(function() {
  $(this).next('button').toggle(this.value !== '');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input id="inputFile1" type="file" />
<button class="reset" style="display:none">reset</button>
<input id="inputFile2" type="file" />
<button class="reset" style="display:none">reset</button>
<input id="inputFile3" type="file" />
<button class="reset" style="display:none">reset</button>
<input id="inputFile4" type="file" />
<button class="reset" style="display:none">reset</button>
<input id="inputFile5" type="file" />
<button class="reset" style="display:none">reset</button>

Answer 6

如果您仍希望为每个按钮使用相同的class，则可以为每个按钮添加唯一id并在脚本中使用它。

＆＃13;

$("#inputFile1").change(function(){
  if($(this).val() == "")
    $('#rfile1').css({"display": "none"});
  else
    $('#rfile1').css({"display": "block"});
})
$("#inputFile2").change(function(){
  if($(this).val() == "")
    $('#rfile2').css({"display": "none"});
  else
    $('#rfile2').css({"display": "block"});
})
$("#inputFile3").change(function(){
  if($(this).val() == "")
    $('#rfile3').css({"display": "none"});
  else
    $('#rfile3').css({"display": "block"});
})
$("#inputFile4").change(function(){
  if($(this).val() == "")
    $('#rfile4').css({"display": "none"});
  else
    $('#rfile4').css({"display": "block"});
})
$("#inputFile5").change(function(){
  if($(this).val() == "")
    $('#rfile5').css({"display": "none"});
  else
    $('#rfile5').css({"display": "block"});
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="inputFile1" type="file"/>
<button class="reset" id="rfile1" style="display:none">reset</button>
<input id="inputFile2"  type="file"/>
<button class="reset" id="rfile2" style="display:none">reset</button>
<input id="inputFile3" type="file"/>
<button class="reset" id="rfile3" style="display:none">reset</button>
<input id="inputFile4" type="file"/>
<button class="reset" id="rfile4" style="display:none">reset</button>
<input id="inputFile5" type="file"/>
<button class="reset" id="rfile5" style="display:none">reset</button>

＆＃13;

另一种不为每个按钮添加唯一ID的方法是为change创建常规input[type='file']事件：

$("input[type='file']").change(function(){
  if($(this).val() == "")
    $(this).next('.reset').css({"display": "none"});
  else
    $(this).next('.reset').css({"display": "block"});
});

输入文件有值时显示按钮重置

6 个答案: