Javascript 在jQuery中按id引用元素？_Javascript_Jquery_Html

Javascript 在jQuery中按id引用元素？

javascript jquery html

Javascript 在jQuery中按id引用元素？,javascript,jquery,html,Javascript,Jquery,Html,我在引用jQuery中的元素时遇到了一些问题。我有一些代码，可以通过单击另一个条目来对其他输入条目执行某些操作。在以下代码中显示文件名可以正常工作。但是，如果我将输入条目放在表单标记中，则无法正确显示您选择的文件名。一些专家能解释一下如何使它起作用吗以下代码可以正常工作： <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charse

我在引用jQuery中的元素时遇到了一些问题。我有一些代码，可以通过单击另一个条目来对其他输入条目执行某些操作。在以下代码中显示文件名可以正常工作。但是，如果我将输入条目放在表单标记中，则无法正确显示您选择的文件名。一些专家能解释一下如何使它起作用吗

以下代码可以正常工作：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>  
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>


<style type='text/css'>
    input[type=file] {
    display:none
}
</style>

<script type='text/javascript'>
$(window).load(function(){
$(function () {
    $('#btn_myFileInput').data('default', $('label[for=btn_myFileInput]').text()).click(function () {
        $('#myFileInput').click()
    });
    $('#myFileInput').on('change', function () {
        var files = this.files;
        if (!files.length) {
            $('label[for=btn_myFileInput]').text($('#btn_myFileInput').data('default'));
            return;
        }
        $('label[for=btn_myFileInput]').empty();
        for (var i = 0, l = files.length; i < l; i++) {
            $('label[for=btn_myFileInput]').append(files[i].name + '\n');
        }
    });
});
});

</script>
</head>   
<body>

<button id="btn_myFileInput">Choose file...</button>
<label for="btn_myFileInput">No file choosen or whatever...</label>
<input type="file" id="myFileInput" multiple/>

</body>
</html>

但是，如果按钮放在表单标记中，我不知道如何正确引用元素。以下代码将无法正确显示所选文件：

<form action="" method="post" >
<fieldset >

<button id="btn_myFileInput">Choose file...</button>
<label for="btn_myFileInput">No file choosen or whatever...</label>
<input type="file" id="myFileInput" multiple/>

</fieldset>
</form>

请问如何解决这个问题

您不需要$window.load和$function{}；，因为在你的情况下，他们做同样的事情。您还可以将returnfalse添加到按钮单击事件中，这可能会解决您的问题

HTML

更新

正如@Cernunos在评论中指出的那样，在使用Internet Explorer时，从中单击不可见项可能会导致问题

有一件事，我认为你应该把风格和脚本元素放进头部或身体。现在，在NeHeleNoT中间有浮动，这个解决方案很可能在使用Internet Explorer时引起问题。寻找example@cernunnos很好的补充了我的答案！一定要考虑的事情。@user2818066没问题。如果回答了你的问题，请考虑左边的复选标记。

$(function () {
    $('#btn_myFileInput').data('default', $('label[for=btn_myFileInput]').text()).click(function () {
        $('#myFileInput').click();
        return false;
    });

    $('#myFileInput').on('change', function () {
        var files = this.files;
        console.log(files);
        if (!files.length) {
            $('label[for=btn_myFileInput]').text($('#btn_myFileInput').data('default'));
            return;
        }
        $('label[for=btn_myFileInput]').empty();
        for (var i = 0, l = files.length; i < l; i++) {
            $('label[for=btn_myFileInput]').append(files[i].name + '\n');
        }
    });
});

<form action="" method="post">
    <fieldset>
        <button id="btn_myFileInput">Choose file...</button>
        <label for="btn_myFileInput">No file choosen or whatever...</label>
        <input type="file" id="myFileInput" multiple>
    </fieldset>
</form>