1

タイトルが私がやろうとしていることを正しく示しているかどうかはわかりませんが、その問題に名前を付ける方法がわかりません。

cssとjqueryを使用してinput[type="file"]要素にスタイルを追加しようとしています。これが私のコードです：

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

ここで、INPUTには表示があります：スタイルがないため、表示されません。

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 
<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 に答える
0

クリックをエミュレートするためにラベルタグを使用することもできます。labelタグは、属性のようなIDを持つ現在のフォームのクリック入力をエミュレートします。例：

<label for="file-input">
    Click me!
    <input type="file" id="file-input" style="display:none;" />
</label>
于 2014-07-06T13:11:28.133 に答える