Question

我花了几个小时试图了解什么是错的。我的目的是在填写文本字段后启用按钮。根据我在JSFiddle的测试，代码似乎很好，但它仍然无法在我的服务器上运行。我错过了什么或这是一个服务器问题（由于javascript是客户端，很难相信）？

PS：我不是HTML的专家，所以我不知道如何识别它的语法;如果它不那么可读我很抱歉并且会感谢编辑帮助。感谢。

   <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <link rel="stylesheet" href="css/style.css">

            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
            <script type="text/javascript">
                var $input = $('input:text'),
                $apply = $('#apply');

                $apply.attr('disabled', true);
                $input.keyup(function() {
                    var trigger = false;
                    $input.each(function() {
                        if (!$(this).val()) {
                            trigger = true;
                        }
                    });
                    trigger ? $apply.attr('disabled', true) : $apply.removeAttr('disabled');
                });
            </script>
    </head>

      <body>
      <section class="container">
        <div class="OpenKore">
        <div id="absolute">
          <form method="GET" action="generate.php">
            <fieldset>
                <legend><h1>OpenKore Automatic Config:</h1></legend>
                LOGIN:
                <p><input type="text" id="id_login" name="login_value" value="" placeholder="Login"></p>
                SENHA:
                <p><input type="text" id= "id_senha" name="senha_value" value="" placeholder="Senha"></p>
                PIN:
                <p><input type="text" id="id_pin" name="pin_value" value="" placeholder="PIN"></p>

                <input id="apply" type="submit" name="commit" disabled value="Gerar Configurações">
            </fieldset>
          </form>
        </div>
        </div>
        </section>
        </body>
    </html>

Answer 1

当浏览器读取您的HTML页面时，它会从上到下读取。当它到达您的<script>标签时，它会运行它们。现在我们在它到达页面的其余部分之前就这样做了，即在它甚至知道任何body或form或input:text标签之前，所以即使你的代码会运行，它根本不会做任何事情，因为页面上没有任何元素存在。

JavaScript 101，如果您需要访问页面上的元素，请在页面加载后运行代码。你是怎样做的？将代码放在页面底部（将<script>标记移到</body>标记之前），或将代码包装在浏览器加载页面后执行的函数中。现在jQuery有一个非常有用的方法为你做这个，将一个函数传递给jQuery，它将在页面加载后执行。

jsFiddle会自动为您执行此操作，因此左上角的下拉显示'onLoad'

即。你的代码

$(); //this is the jQuery function


//This is your code wrapped in a function called 'yourCode'
function yourCode() {
    var $input = $('input:text'),
           $apply = $('#apply');

    $apply.attr('disabled', true);
    $input.keyup(function () {
        var trigger = false;
        $input.each(function () {
            if (!$(this).val()) {
                trigger = true;
            }
        });
        trigger ? $apply.attr('disabled', true) : $apply.removeAttr('disabled');
    });
}

$(yourCode); //this is passing the jQuery function a function, 
             //this will now be execute once the page is loaded

//or what most people do, pass in as an anonymous function 
//which eliminates a step

$(function () {
    var $input = $('input:text'),
             $apply = $('#apply');

    $apply.attr('disabled', true);
    $input.keyup(function () {
        var trigger = false;
        $input.each(function () {
            if (!$(this).val()) {
                trigger = true;
            }
        });
        trigger ? $apply.attr('disabled', true) : $apply.removeAttr('disabled');
    });
});

根据@ j08691的建议我建议阅读jQuery中准备好的文档here

JQuery没有使用谷歌的CDN

1 个答案: