Question

我有一个只能笨重的功能，我知道它可以写得更好，是他们结合下面的方法吗？

$('#calculateAll').click(function(){        
    if( $('.a').val() === '' ) {
        $('.a').css('border-color','#BE1E2D');
        return false;
    } else if( $('.b').val() === '' ) {
        $('.b').css('border-color','#BE1E2D');
        return false;
    } else if( $('.c').val() === '' ) {
        $('.c').css('border-color','#BE1E2D');
        return false;
    } else if( $('.d').val() === '' ) {
        $('.d').css('border-color','#BE1E2D');
        return false;
    } else ...

Answer 1

您可以使用jQuery .each()函数。

$('.a, .b, .c, .d').each(function() {
  if ($(this).val() == '') {
    $(this).css('border-color','#BE1E2D');
    return false;
  }
});

Answer 2

看起来你正在验证某些东西。与其他答案不同，他们忘记了它不仅仅是迭代元素并且如果为空则给它们带红色边框。

$('#calculateAll').on('click', function() {

  var err = false;
  // I would recommend using a class for these elements or a better selector
  $('.a, .b, .c, .d').each(function() {
    if ($(this).val() === '') {
      $(this).css('border-color','#BE1E2D');
      err = true;
      // If you don't want to add a border-color to the other elements, return false and break the loop
      return false;
    }
  });

  // Was something empty?
  if (err) {
    return false;
  }

  // All good, let's continue
  ...

});

Answer 3

执行此操作的一种可能的更简单方法是执行以下操作：

$('#calculateAll').click(function() {        
    var $invalidElements = $(".a, .b, .c, .d")
                           .css('border-color', '')
                           .filter(function() { return $(this).val() === "" }).first()
                           .css('border-color', '#BE1E2D');

    if ($invalidElements.length > 0) {
        return false;
    }
    else {
        // code executed when all elements are valid
    }
});

我建议删除.first()，以便您可以同时验证所有元素。另外，我添加了行.css('border-color', '')来清除所有元素＆＃39;验证前的边框颜色。

Answer 4

演示：http://jsfiddle.net/U7t4p/1/

首先使用.filter()

查找空输入

$('.container input[type="text"]').filter(function() { 
    return this.value === ''; 
})

此方法遍历所有匹配的元素，如果回调返回true，则将当前元素wilhttp：//jsfiddle.net/U7t4p/1/l添加到返回的jQuery对象中。

最后，我们将CSS类应用于这些元素：

.addClass('hl');

使用jQuery检查值是否为空

4 个答案: