jquery - 创建自定义文件输入

Question

我正在使用以下 HTML 处理自定义文件输入:

<div class="file">
  <a>browse<input type="file" name="annex"/></a>                 
  <span class="path">path</span>
</div>
<div class="help">Only PDF files allowed</div>

您可以在此处查看在线示例:http://codepen.io/mdmoura/pen/qAvDk

问题

CSS

• 我无法垂直对齐按钮(红色)文本和路径文本(蓝色)。我尝试对两者应用内联 block 和相同的填充，但没有成功......我该如何解决？

JQUERY

• 我使用 var input = $(this); 但如果我使用 var this = $(this); 它不起作用。为什么？

• 使用 $('.path').text(label); 有效……但我想在我引用的 :file 之后获取跨度……我尝试了 input.next().text(label); 但它不起作用。为什么？

谢谢你，米格尔

Answer 1

CSS 问题

在所有浏览器中都不是问题，但是如果您从 span 中删除 padding，将 vertical-align: middle 添加到 anchor 并移除，则 anchor 和 span 将对齐这是负底边距。

JS 问题

this 是不可变的。它无法分配，这实际上会产生语法(我认为)错误

Invalid left hand assignment

在声明或调用函数时设置this的方法有多种，但var input = $(this)是一种常见的解决方案。我会坚持这一点。

至于您的选择器，您需要使用 input.parent().next()。输入是 anchor 的 child ，没有 sibling 。