Jquery就是不想工作

Jquery just does not want to work

本文关键字:工作 不想 Jquery      更新时间:2023-09-26

我对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

$('form > input')

应该是

$('form input')

因为>的意思是"直接子级",并且在forminput之间有一个div

因为您的选择器选择了所有具有form标记父级的输入,但您的所有输入都具有div标记父级。

试试这个:

$('form input')

$('form > input')要求输入是"form"的直接后代。你的包裹在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>

根据评论中的请求:同样,选择器不是"表单>输入",而是"表单输入"。另外,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>

$('form > input')选择表单的直接输入子体,如下所示:

<form>
  <input />
</form>

但既然你有这样的结构:

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

您需要使用$('form > div > input'),或者更宽松地说,只使用$('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;
            }
        });
        if (plus == 0) {
            $('#register').attr('disabled', 'disabled');
        } else {
            $('#register').removeAttr('disabled');
        }
        $("#demo").text(url);
    });
})()
<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>

好吧,通过这里几个人的帮助(感谢你们所有人,感谢你们的帮助!)我终于找到了一个完美的解决方案。:)

$(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>