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

我尝试为输入文件创建一个按钮重置。每次输入文件有值时，就会显示一个按钮来重置输入文件。问题是，我有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"});
})

这里是西德尔

---

将单个ID设置为按钮将完成此工作。检查这个

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

你可以这样做

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

---

有一个简单的方法可以做到这一点。我已经编辑了你的小提琴

---

我用

div

包围了每组

input

文件和

按钮

，简化了JS代码

$（文档）.ready（函数（）{
$（“.input file”）.on（“change”，function（）{
if（$（this）.val（）==“”）{
$（this.parent（）.find（“.reset”）.css（{“display”：“none”}）；
}否则{
$（this.parent（）.find（“.reset”）.css（{“display”：“block”}）；
}
});
});

重置
重置
重置
重置
重置

使用
class
/
属性
选择器而不是
id
来减少冗余
用于选择匹配元素集中每个元素紧跟其后的同级元素
使用
toggle（BOOLEAN）
来播放
reset
按钮的可见性，而不是
.css
方法


$（'[type=“file”]'）。更改（函数（）{
$（this.next（'button'）.toggle（this.value！=''）；
});

重置
重置
重置
重置
重置
如果仍要对每个按钮使用相同的
类
，则可以向每个按钮添加唯一的
id
，并在脚本中使用它


$（“#inputFile1”）.change（函数（）{
if（$（this）.val（）==“”）
$（'#rfile1'）.css（{“display”：“none”}）；
其他的
$（'#rfile1'）.css（{“display”：“block”}）；
})
$（“#inputFile2”）.change（函数（）{
if（$（this）.val（）==“”）
$（'#rfile2'）.css（{“display”：“none”}）；
其他的
$（'#rfile2'）.css（{“display”：“block”}）；
})
$（“#inputFile3”）.change（函数（）{
if（$（this）.val（）==“”）
$（'#rfile3'）.css（{“display”：“none”}）；
其他的
$（'#rfile3'）.css（{“display”：“block”}）；
})
$（“#inputFile4”）.change（函数（）{
if（$（this）.val（）==“”）
$（'#rfile4'）.css（{“display”：“none”}）；
其他的
$（'#rfile4'）.css（{“display”：“block”}）；
})
$（“#inputFile5”）.change（函数（）{
if（$（this）.val（）==“”）
$（'#rfile5'）.css（{“display”：“none”}）；
其他的
$（'#rfile5'）.css（{“display”：“block”}）；
})

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