Jquery就是不想工作
Jquery just does not want to work
我对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')
因为>
的意思是"直接子级",并且在form
和input
之间有一个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>
相关文章:
- Javascript.getHours()工作不正常
- removeClass函数没有'工作不正常
- jQuery Ajax GET请求工作不正常
- onclick风格的整个李不想要
- Cordova ng路线工作不正常
- 更新属性工作不正常Meteor/MongoDB
- 为什么文本对齐:对;工作不正常
- Javascript作用域和Ajax调用;工作不正常
- JavaScript DOM insertBefore'工作不正常
- Angular Js布线工作不正常
- onmouseout函数工作不正常
- 承诺工作不正常
- JQuery.live()工作不正常
- Alloy UI文本区域工作不正常
- jQuery脚本不想一起工作
- 当我添加警报(“现在它可以工作”);这个函数有效,但我不想要这个
- 悬停函数没有'I don’我不想工作
- 我的JavaScript代码没有'I don’我不想工作
- Jquery就是不想工作
- Javascript不想工作