jquery - jQuery - 单击按钮时，仅在父元素中模拟 input[type="file"].change

Question

我不确定标题是否正确说明了我正在尝试做的事情，但我不知道如何命名该问题。

我正在尝试使用 css 和 jquery 为 input[type="file"] 元素添加一些样式。这是我的代码：

<div class="input-file">
    <input type="file"><label>Select file...</label><button type="button">...</button>
    </div>

其中 INPUT 具有 display: none 样式，因此不可见。

Javascript：

$('.input-file > button').live('click',function() {
$('input[type="file"]').click(); });

如果页面上只有 1 个元素，则效果很好，但如果有例如 3 个元素，则每当我单击按钮 1 时，它都会触发 3 次功能。我希望它只响应它的父元素<div class="input-file">

我如何使用 .parent 或 .before 或任何可以实现此目的的功能？

编辑：

@Chandu 有一个很好的解决方案。

此外，另一种选择是 $(this).prev().prev().click(); 如果元素是静态的并且总是在相同的位置。

谢谢@Chandu。

Answer 1

尝试这个：

$('.input-file > button').live('click',function() {
    $(this).closest('.input-file').find('input[type="file"]').click(); 
});

更新： 如果您使用的是 jquery >= 1.7，那么使用这个版本on：

$('.input-file').on('click', 'button',function() {
    $(this).closest('.input-file').find('input[type="file"]').click(); 
});

Answer 2

您也可以使用标签标签来模拟点击。标签标签模拟当前表单的点击输入，其 id 类似于属性。示例：

<label for="file-input">
    Click me!
    <input type="file" id="file-input" style="display:none;" />
</label>

Answer 3

<script type="text/javascript">
    $(function () {
        $('#btn-upload').click(function (e) {
            e.preventDefault();
            $('#file').click();
        });
    });
</script>

<style type="text/css">
    #file { display:none; } 
</style>

<div>
    <input type="file" id="file" name="file" />
    <button type="button" id="btn-upload">Image</button>
</div>