[英]Selecting specific element within a div?
I am building a contact form, and I am having problems with jQuery. 我正在建立联系表单,而jQuery有问题。 I want to select specific input fields that have an error and apply the class err
. 我想选择有错误的特定输入字段并应用err
类。 Unfortunately, my code selects all inputs when there is an error. 不幸的是,我的代码在出现错误时会选择所有输入。 I am having trouble identifying which part of my logic is wrong. 我无法确定逻辑的哪一部分是错误的。
$('#send_mail').click(function(){
$("#contact_body").find('label').each(function(){
var contact_label = $('input[required=true], textarea[required=true]');
var label_check = $(this).find(contact_label);
$(contact_label).removeClass('err');
if (!$.trim($(label_check).val())){
$(contact_label).addClass('err');
}
});
});
The order of my HTML goes something like so: HTML的顺序如下所示:
#contact_body
<label>
<input>
</label>
This selects all input
and textarea
elements: 这将选择所有input
和textarea
元素:
var contact_label = $('input[required=true], textarea[required=true]');
Instead, you should restrict it to the elements within the label: 相反,您应该将其限制为标签内的元素:
var contact_label = $(this).find('input[required=true], textarea[required=true]');
Note that $(contact_label)
and contact_label
are equivalent in your code, as well as $(label_check)
and label_check
. 请注意, $(contact_label)
和contact_label
在代码中以及$(label_check)
和label_check
是等效的。
Also, you can use the state
parameter of toggleClass() to simplify this: 同样,您可以使用toggleClass()的state
参数来简化此操作:
contact_label.removeClass('err');
if (!$.trim(label_check.val())){
contact_label.addClass('err');
}
… to this: …对此:
contact_label.toggleClass('err', !$.trim(label_check.val()));
Here's the updated event: 这是更新的事件:
$('#send_mail').click(function(){
$('#contact_body').find('label').each(function(){
var contact_label = $(this).find('input[required=true], textarea[required=true]');
var label_check = $(this).find(contact_label);
contact_label.toggleClass('err', !$.trim(label_check.val()));
});
});
I think your original code would work if you just changed this line: 我认为如果您仅更改以下行,您的原始代码将起作用:
$(contact_label).addClass('err');
To this: 对此:
$(label_check).addClass('err');
Because $(contact_label)
references all the required inputs, whereas $(label_check)
references only the input being checked. 因为$(contact_label)
引用所有必需的输入,而$(label_check)
仅引用要检查的输入。
But your code could be simplified, and you make unnecessary calls to $()
, giving it an argument that is already a JQuery object. 但是您的代码可以简化,并且可以对$()
进行不必要的调用,并为其提供一个已经是JQuery对象的参数。
I also do not see that you need to loop through the labels. 我也看不到您需要遍历标签。 You could loop through the required inputs instead. 您可以改为遍历所需的输入。
$('#send_mail').click(function(){
$("#contact_body").find(':input[required]').each(function() {
var $input = $(this);
$input.removeClass('err');
if (!$.trim($input.val())){
$input.addClass('err');
}
});
});
Which could be shortened by using the .toggleClass()
function: 可以通过使用.toggleClass()
函数来缩短:
$('#send_mail').click(function(){
$("#contact_body").find(':input[required]').each(function() {
$(this).toggleClass('err', !$.trim($input.val()));
});
});
Notes: 笔记:
':input'
matches <input>
, <select>
and <textarea>
elements. 选择器':input'
匹配<input>
, <select>
和<textarea>
元素。 This is a slightly different approach. 这是一个稍微不同的方法。 Gives a bit more flexibility. 提供更多的灵活性。
arr = ['first', 'last', 'email', 'msg']; //IDs of fields to check $('#send_mail').click(function(){ $('input, textarea').removeClass('err'); for (var i=0; i<arr.length-1; i++) { //Loop through all field IDs if ( $('#'+arr[i]).val() == '' ) { $('#'+arr[i]).addClass('err').focus(); return false; } } //AJAX to send email goes here alert('Email sent'); });
.err{background:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <label for="first">First Name:</label> <input id="first" type="text" required /><br> <label for="last">Last Name:</label> <input id="last" type="text" required/><br> <label for="email">Email:</label> <input id="email" type="email" required /><br> <label for="msg">Message:</label> <textarea id="msg" required></textarea> <button id="send_mail">Send</button>
you can simplify the code, there will be less mistakes: 您可以简化代码,从而减少错误:
$('#send_mail').click(function(){
$("#contact_body").find('label').each(function(){
var field = $(this).find('[required=true]');
if ($.trim($(field).val())){
$(this).removeClass('err');
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.