1

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

我正在尝试使用 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。

4

3 回答 3

3

尝试这个:

$('.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(); 
});
于 2012-07-10T16:52:52.327 回答
0

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

<label for="file-input">
    Click me!
    <input type="file" id="file-input" style="display:none;" />
</label>
于 2014-07-06T13:11:28.133 回答
0
<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>
于 2014-02-14T12:57:25.723 回答