Jquery只是不想工作

时间：2015-11-01 18:04:50

标签： javascript jquery

我吮吸Jquery和Javascript。

我一直在尝试做这项工作：

debugger;

(function () {
    $('form input').keyup(function () {

        var url = [false, false, false, false, false];
        var plus = 0;
        $('form input').each(function () {
            plus = plus + 1;
            if ($(this).val() == '') {
                url[plus] = true;
            }
        });

        $("#demo").text(url);
    });
})()

但是jquery根本不会设置#demo文本，没有任何事情发生。

HTML：

<div class="inner cover">
     <h1 class="cover-heading">Create.</h1>

    <p class="lead">
        <form action="./index.php?p=create" method="post" class="form-horizontal" role="form">
            <div class="form-group">
                <input name="url" type="text" id="url" class="form-control" placeholder="URL">
            </div>
            <div class="form-group">
                <input name="url2" type="text" id="url2" class="form-control" placeholder="URL">
            </div>
            <div class="form-group">
                <input name="url3" type="text" id="url3" class="form-control" placeholder="URL">
            </div>
            <div class="form-group">
                <input name="url4" type="text" id="url4" class="form-control" placeholder="URL">
            </div>
            <div class="form-group">
                <input name="url5" type="text" id="url5" class="form-control" placeholder="URL">
            </div>
            <div class="form-group">
                <button type="submit" name="submit_url" class="btn btn-lg btn-default">Go!</button>
            </div>
        </form>
    </p>
    <p id="demo"></p>
</div>

我完全做错的所有事情是什么？

（我在JSfiddle中测试过这个）

提前致谢。 -G

5 个答案:

答案 0 :(得分：0)

$('form > input')

应该是

$('form input')

知道>表示“direct child”并且div和form之间有input

答案 1 :(得分：0)

$('form > input')要求输入是“形式”的直接后代。你的包裹在DIV中。正确的选择器是$('form input') 

(function () {
  $('form input').keyup(function () {

    var url = [false, false, false, false, false];
    var plus = 0;
    $('form > input').each(function () {
        plus = plus + 1;
        if ($(this).val() == '') {
            url[plus] = true;
        }
    });

    $("#demo").text("yo");
  });
})()
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<div class="inner cover">
        <h1 class="cover-heading">Create.</h1>

    <p class="lead">
        <form action="./index.php?p=create" method="post" class="form-horizontal" role="form">
            <div class="form-group">
                <input name="url" type="text" id="url" class="form-control" placeholder="URL">
            </div>
            <div class="form-group">
                <input name="url2" type="text" id="url2" class="form-control" placeholder="URL">
            </div>
            <div class="form-group">
                <input name="url3" type="text" id="url3" class="form-control" placeholder="URL">
            </div>
            <div class="form-group">
                <input name="url4" type="text" id="url4" class="form-control" placeholder="URL">
            </div>
            <div class="form-group">
                <input name="url5" type="text" id="url5" class="form-control" placeholder="URL">
            </div>
            <div class="form-group">
                <button type="submit" name="submit_url" class="btn btn-lg btn-default">Go!</button>
            </div>
        </form>
    </p>
    <p id="demo"></p>
</div>

根据评论请求：再次，选择器不是“form＆gt; input”，是“表单输入”。另外，你的IF中有什么“空”？这有效：

(function () { 
  
  var url = [false, false, false, false, false];
  var plus = 0;
  
  $('form input').keyup(function () {
    
    $('form input').each(function () {
      plus++;
      
      if ($(this).val() == '')
        url[plus] = true;
    });
    
    // WHAT'S EMPTY??
    
    /*
    if (empty) {  
      $('#register').attr('disabled', 'disabled');
    }
    else {
      $('#register').removeAttr('disabled');
    }
    */
    
    $("#demo").text(url);
  });
  
})()
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<div class="inner cover">
        <h1 class="cover-heading">Create.</h1>

    <p class="lead">
        <form action="./index.php?p=create" method="post" class="form-horizontal" role="form">
            <div class="form-group">
                <input name="url" type="text" id="url" class="form-control" placeholder="URL">
            </div>
            <div class="form-group">
                <input name="url2" type="text" id="url2" class="form-control" placeholder="URL">
            </div>
            <div class="form-group">
                <input name="url3" type="text" id="url3" class="form-control" placeholder="URL">
            </div>
            <div class="form-group">
                <input name="url4" type="text" id="url4" class="form-control" placeholder="URL">
            </div>
            <div class="form-group">
                <input name="url5" type="text" id="url5" class="form-control" placeholder="URL">
            </div>
            <div class="form-group">
                <button type="submit" name="submit_url" class="btn btn-lg btn-default">Go!</button>
            </div>
        </form>
    </p>
    <p id="demo"></p>
</div>

答案 2 :(得分：0)

由于您的selector选择了父级为form标记的所有输入，但您的所有输入都有父div标记。

试试这个：

$('form input')

答案 3 :(得分：0)

$('form > input')选择表单的直接输入后代，如下所示：

<form>
  <input />
</form>

但是因为你有这个结构：

<form>
  <div>
    <input />
  </div>
</form>

您需要使用$('form > div > input')，或者更宽松地使用$('form input')（不使用>字符）。

在此处查看：

＆＃13;
＆＃13; 
(function () {
    $('form input').keyup(function () {

        var url = [false, false, false, false, false];
        var plus = 0;
        $('form input').each(function () {
            plus = plus + 1;
            if ($(this).val() == '') {
                url[plus] = true;
            }
        });

        if (plus == 0) {
            $('#register').attr('disabled', 'disabled');
        } else {
            $('#register').removeAttr('disabled');
        }

        $("#demo").text(url);
    });
})()
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner cover">
     <h1 class="cover-heading">Create.</h1>

    <p class="lead">
        <form action="./index.php?p=create" method="post" class="form-horizontal" role="form">
            <div class="form-group">
                <input name="url" type="text" id="url" class="form-control" placeholder="URL">
            </div>
            <div class="form-group">
                <input name="url2" type="text" id="url2" class="form-control" placeholder="URL">
            </div>
            <div class="form-group">
                <input name="url3" type="text" id="url3" class="form-control" placeholder="URL">
            </div>
            <div class="form-group">
                <input name="url4" type="text" id="url4" class="form-control" placeholder="URL">
            </div>
            <div class="form-group">
                <input name="url5" type="text" id="url5" class="form-control" placeholder="URL">
            </div>
            <div class="form-group">
                <button type="submit" name="submit_url" class="btn btn-lg btn-default">Go!</button>
            </div>
        </form>
    </p>
    <p id="demo"></p>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

好的，所以通过这里的几个人的帮助（感谢你们所有人，感谢你的帮助！）我终于找到了一个完美的解决方案。 ：）

$(window).load(function(){
    (function () {
        $('form input').keyup(function () {

            var url = [false, false, false, false, false];
            var plus = -1;
            var next;
            $('form input').each(function () {
                plus = plus + 1;
                if ($(this).val() != '') {
                    url[plus] = true;
                    next = plus + 1;
                    $("#url"+next).show();
                } else {
                    url[plus] = false;
                    next = plus + 1;
                    $("#url"+next).val("");
                    $("#url"+next).hide();
                }
            });
        });
    })()
});

HTML：

<div class="inner cover">
    <h1 class="cover-heading">Create.</h1>
    <p class="lead">
        <form action="./index.php?p=create" method="post" class="form-horizontal" role="form">
            <div class="form-group">
                <input name="url0" type="text" id="url0" class="form-control" placeholder="URL" required>
            </div>
            <div class="form-group">
                <input name="url1" type="text" id="url1" style="display:none" class="form-control" placeholder="URL">
            </div>
            <div class="form-group">
                <input name="url2" type="text" id="url2" style="display:none" class="form-control" placeholder="URL">
            </div>
            <div class="form-group">
                <input name="url3" type="text" id="url3" style="display:none" class="form-control" placeholder="URL">
            </div>
            <div class="form-group">
                <input name="url4" type="text" id="url4" style="display:none" class="form-control" placeholder="URL">
            </div>
            <div class="form-group">
                <button type="submit" name="submit_url" class="btn btn-lg btn-default">Go!</button>
            </div>
        </form>
    </p>
</div>
相关问题
最新问题