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

我无法垂直对齐按钮（红色）文本和路径文本（蓝色）。我尝试为两者应用内联块和相同的填充但没有运气......我该如何解决？

JQUERY

我使用var input = $(this);但如果我使用var this = $(this);则无效。为什么呢？
使用$('.path').text(label);有效...但我希望在我引用的：文件之后获得跨度...我尝试input.next().text(label);但它不起作用。为什么呢？

谢谢你，米格尔

Answer 1

CSS问题

在所有浏览器中都不存在问题，但如果从span中删除padding，则锚点和范围将对齐，将vertical-align: middle添加到锚点并删除其负底边距。

JS问题

this不可变。它无法分配，这实际上创建了一个语法（我认为）错误

左手分配无效

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

对于您的选择器，您需要使用input.parent().next()。输入是锚点的子节点，没有兄弟节点。

创建自定义文件输入

1 个答案:

CSS问题

JS问题