使用jquery更改文件输入的图标

我正在尝试使用自定义样式的文件输入构建一个html表单。 我希望标签的图标在用户选择要上载的文件后更改。我提出了一些jquery代码，但它一次更改了所有输入上的图标，而不是只更改当前输入上的图标

有人知道如何逐个输入更改图标输入吗

谢谢

我的代码：

$（“#要上载的文件”）.change（函数（）{
$（“.file upload”）.css（“背景”、“url(https://css-tricks.com/apple-touch-icon.png)2%/45px不重复（ececec）；
});
input[type=“file”]{
显示：无；
}
.文件上传{
显示：块；
宽度：260px；
填充：10px 16px 10px 56px；
边界：无；
大纲：无；
边缘底部：10px；
字体：16px/28px‘开放式无衬线’、‘Helvetica Neue’、Helvetica、无衬线；
颜色：#3f3f；
字体大小：300；
背景:#ececec ;；
-webkit边界半径：0；
光标：指针；
背景：url(http://cdn.sstatic.net/stackoverflow/img/favicon.ico?v=4f32ecc8f43d)2%/45px不重复#ececec；
}

文件输入1
文件输入2
因为两个div应用了相同的css，所以应该使用
$（this）
来获取被单击的元素

$("#file-to-upload").on('change', function(){
    $(this).parent().find(".file-upload").css("background", "url(https://css-tricks.com/apple-touch-icon.png) 2% / 45px no-repeat #ececec");
});

原因是您对两个输入使用了相同的id，对两个标签再次使用了相同的类。
因此，您可以将代码更改为：


$（“#要上载的第一个文件”）.change（函数（）{
$（“#firstLabel”）.css（“背景”、“url(https://css-tricks.com/apple-touch-icon.png)2%/45px不重复（ececec）；
});
$（“#要上载的第二个文件”）.change（函数（）{
$（“#secondLabel”）.css（“背景”、“url(https://css-tricks.com/apple-touch-icon.png)2%/45px不重复（ececec）；
});
input[type=“file”]{
显示：无；
}
.文件上传{
显示：块；
宽度：260px；
填充：10px 16px 10px 56px；
边界：无；
大纲：无；
边缘底部：10px；
字体：16px/28px‘开放式无衬线’、‘Helvetica Neue’、Helvetica、无衬线；
颜色：#3f3f；
字体大小：300；
背景:#ececec ;；
-webkit边界半径：0；
光标：指针；
背景：url(http://cdn.sstatic.net/stackoverflow/img/favicon.ico?v=4f32ecc8f43d)2%/45px不重复#ececec；
}

文件输入1
文件输入2
这是因为您在处理函数中查询“.file upload”，而不是使用“this”引用相关的输入元素，然后使用jQuery的方法引用所需的标签）

像这样：

$("your-selector").change(function(){
    //$(this).prev();//refers needed label
    $(this).prev().css("background","red");//set element.style to relevant label
});

重要我注意到您对同一id属性使用了多次，这是极不推荐的。
因为“id”属性用作元素的标识符，所以它在文档中应该是唯一的。我建议你抽出时间来读这篇文章：
谢谢你，伙计！我将ID更改为唯一的ID，并切换到使用类进行jquery。