Question

我正在尝试使用自定义样式文件输入构建html表单。我想在用户选择要上传的文件后更改标签的图标。我想出了一些jquery代码，但它会立即更改所有输入上的图标，而不是仅在当前输入上更改它。

有没有人知道如何通过输入更改图标输入？

感谢。

我的代码：

＆＃13;

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

＆＃13;

input[type="file"] {
    display: none;
}

.file-upload {
	display: block;
	width: 260px;
	padding: 10px 16px 10px 56px;
	border: none;
	outline: none;
	margin-bottom: 10px;
	font: 16px/28px 'Open Sans','Helvetica Neue',Helvetica,sans-serif;
	color: #3f3f3f;
	font-weight: 300;
	background: #ececec;
	-webkit-border-radius: 0;
	cursor: pointer;
	background: url(http://cdn.sstatic.net/stackoverflow/img/favicon.ico?v=4f32ecc8f43d) 2% / 45px no-repeat #ececec;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div><label for="file-to-upload" class="file-upload">File input 1</label>
<input type="file" name="file-to-upload" id="file-to-upload"></div>
<div><label for="file-to-upload" class="file-upload">File input 2</label>
<input type="file" name="file-to-upload" id="file-to-upload"></div>

＆＃13;

Answer 1

那是因为你查询＆＃34; .file-upload＆＃34;内部处理程序功能，而不是你可以使用＆＃39;这个＆＃39;引用相关的输入元素，然后使用.prev() jQuery的方法引用所需的标签）

像这样：

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

重要我注意到您对同一个id属性多次使用，这是非常不推荐的。因为＆＃39; id＆＃39; attribute用作Element的标识符，因此它在文档中应该是唯一的。我建议你找时间阅读这篇文章：valid id naming

Answer 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");
});

Answer 3

原因是您对两个标签的输入和同一类使用相同的ID。所以你可以将你的代码更改为：

＆＃13;

$("#first-file-to-upload").change(function(){
	$("#firstLabel").css("background", "url(https://css-tricks.com/apple-touch-icon.png) 2% / 45px no-repeat #ececec");
});

$("#second-file-to-upload").change(function(){
	$("#secondLabel").css("background", "url(https://css-tricks.com/apple-touch-icon.png) 2% / 45px no-repeat #ececec");
});

＆＃13;

input[type="file"] {
    display: none;
}

.file-upload {
	display: block;
	width: 260px;
	padding: 10px 16px 10px 56px;
	border: none;
	outline: none;
	margin-bottom: 10px;
	font: 16px/28px 'Open Sans','Helvetica Neue',Helvetica,sans-serif;
	color: #3f3f3f;
	font-weight: 300;
	background: #ececec;
	-webkit-border-radius: 0;
	cursor: pointer;
	background: url(http://cdn.sstatic.net/stackoverflow/img/favicon.ico?v=4f32ecc8f43d) 2% / 45px no-repeat #ececec;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div><label for="first-file-to-upload" class="file-upload" id="firstLabel">File input 1</label>
<input type="file" name="first-file-to-upload" id="first-file-to-upload"></div>
<div><label for="second-file-to-upload" class="file-upload" id="secondLabel">File input 2</label>
<input type="file" name="second-file-to-upload" id="second-file-to-upload"></div>

＆＃13;

Karthik也回答说。但对于文档中的多个元素使用相同的id实际上并不是一个好习惯。

使用jquery

3 个答案: