堆栈内存溢出
  简体   繁体   English

jQuery只是不想工作

[英]Jquery just does not want to work

 原文  2015-11-01 18:04:50  7   5    javascript/ jquery

问题描述

I suck at Jquery and Javascript. 我很喜欢Jquery和Javascript。

I've been trying to make this work: 我一直在努力使这项工作： 

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);
    });
})()

But jquery won't even set the #demo text at all, nothing is happening whatsoever. 但是jquery甚至根本不会设置#demo文本，什么也没有发生。

html: 的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>

What are all of the things I've totally done all wrong? 我完全做错了的所有事情是什么？

(I've been testing this in JSfiddle) （我已经在JSfiddle中对此进行了测试）

Thanks in advance. 提前致谢。 -G -G

5 个解决方案

解决方案1
 0  2015-11-01 18:10:02

$('form > input')

should be 应该 

$('form input')

Becase > means " direct child " and you have a div between form and input Becase >表示“ 直子 ”，您在form和input之间有一个div

解决方案2
 0  2015-11-01 18:10:30

$('form > input') requires inputs to be direct descendants of "form". $('form > input')要求输入必须是“ form”的直接后代。 yours are wrapped in DIVs. 您的包裹在DIV中。 the correct selector is $('form 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; } }); $("#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>

AS PER REQUEST IN COMMENT : again, selector is not "form > input", is "form input". 根据要求 ：再次，选择器不是“表单>输入”，而是“表单输入”。 Also, what's "empty" in your IF? 另外，您的IF中的“空”是什么？ this works: 这有效： 

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

解决方案3
 0  2015-11-01 18:11:04

Because your selector select all input who have parent a form tag, but all your input have parent a div tag. 因为你的选择全部选择输入谁拥有父form标签，但所有的输入有父div标签。

Try this: 尝试这个： 

$('form input')

解决方案4
 0  2015-11-01 18:33:02

$('form > input') selects direct input descendants of form, like this: $('form > input')选择形式的直接输入后代，如下所示： 

<form>
  <input />
</form>

but since you have this structure: 但由于您具有以下结构： 

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

you need to use $('form > div > input') , or, more loosely, just $('form input') (without the > character). 您需要使用$('form > div > input') ，或更宽松地说，只需使用$('form input') （不带>字符）。

See it here: 在这里看到它： 

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

解决方案5
 0  2015-11-01 19:52:36

Okay so through the help of several people on here (credit to all of you, thanks for your help!) I finally reached a solution that works perfectly. 好的，通过这里的几个人的帮助（感谢大家，谢谢您的帮助！），我终于找到了一个完美的解决方案。 :) :) 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 这个jQuery隐藏功能只是不想工作 - This jQuery hide function just does not want to work jQuery不再起作用了（在我的网站上） - jQuery just does not work anymore (on my site) jquery每个函数都不按我想要的方式工作 - jquery each function does not work the way I want it to Jquery function 只在第一个元素上工作，我想在所有类上工作 - Jquery function is working just on first element, I want to work on all classes 使用php进行jquery回调...只想要值，而不是重定向 - jquery callback with php… just want the value, not redirect 子菜单无法正常运行 - Submenu does not work as I want jQuery的效果不想在谷歌浏览器中工作。 怎么了？ - jquery effect does not want to work in google chrome. what's wrong? jQuery mouseleave - mouseenter 只在第一个元素中工作 - jQuery mouseleave - mouseenter just work in the First Element 删除元素不适用于jQuery - Removing elements just won't work with jQuery nodejs服务器端事件只是不想工作 - nodejs server side events just don't want to work
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM