在div中选择特定元素？

Question

我正在建立联系表单，而jQuery有问题。 我想选择有错误的特定输入字段并应用err类。 不幸的是，我的代码在出现错误时会选择所有输入。 我无法确定逻辑的哪一部分是错误的。

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

HTML的顺序如下所示：

#contact_body
<label>
  <input>
</label>

Answer 1

这将选择所有input和textarea元素：

var contact_label = $('input[required=true], textarea[required=true]');

相反，您应该将其限制为标签内的元素：

var contact_label = $(this).find('input[required=true], textarea[required=true]');

请注意， $(contact_label)和contact_label在代码中以及$(label_check)和label_check是等效的。

同样，您可以使用toggleClass（）的state参数来简化此操作：

contact_label.removeClass('err');
if (!$.trim(label_check.val())){
  contact_label.addClass('err');
}

…对此：

contact_label.toggleClass('err', !$.trim(label_check.val()));

这是更新的事件：

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

Answer 2

我认为如果您仅更改以下行，您的原始代码将起作用：

$(contact_label).addClass('err');

对此：

$(label_check).addClass('err');

因为$(contact_label)引用所有必需的输入，而$(label_check)仅引用要检查的输入。

---

但是您的代码可以简化，并且可以对$()进行不必要的调用，并为其提供一个已经是JQuery对象的参数。

我也看不到您需要遍历标签。 您可以改为遍历所需的输入。

$('#send_mail').click(function(){
    $("#contact_body").find(':input[required]').each(function() {
        var $input = $(this);
        $input.removeClass('err');
        if (!$.trim($input.val())){
            $input.addClass('err');
        }
    });
});

可以通过使用.toggleClass()函数来缩短：

$('#send_mail').click(function(){
    $("#contact_body").find(':input[required]').each(function() {
        $(this).toggleClass('err', !$.trim($input.val()));
    });
});

笔记：

• 选择器':input'匹配<input> ， <select>和<textarea>元素。

Answer 3

这是一个稍微不同的方法。 提供更多的灵活性。

 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> 

Answer 4

您可以简化代码，从而减少错误：

$('#send_mail').click(function(){
    $("#contact_body").find('label').each(function(){
        var field = $(this).find('[required=true]'); 

        if ($.trim($(field).val())){
            $(this).removeClass('err');
        } 
    });
});