在jQuery中添加和删除类

Question

I have a jQuery snippet written where if any of my inputs in a specific table are entered it changes the class of the rest of the inputs on that table, but if the user fills in an input field, and then deletes their input it still changes the class, though it shouldnt. here is my attempt at doing this.

 $('#lostTable :input').change(function(){                                          

        var $lostTableInput = $('#lostTable :input:not(input[type=hidden])');
        var hasData = false;

        $lostTableInput.each(function(){
            if($(this).val().length > 0){
                hasDataLf = true;
                return false;
            }
        });

    $lostTableInput.toggleClass('R', hasDataLf); 

// this above part works for changing the class, and below is my attempt at changing
// it back if the user deletes the data that was entered in.

    $lostTableInput.each(function(){
      if($(this).val().length == 0) {
        $lostTableInput.removeClass('R'); 
    }
   }
  )
 }
);

Answer 1

You could simplify a bit...

var $inputs =  $('#lostTable :input').not(':hidden');
$inputs.change(function(){
  $(this).toggleClass('dummy', $(this).val().length > 0);
  $inputs.toggleClass('R', $inputs.filter('.dummy').length > 0);
});

You may want to look into the delegate jquery method, for better performance. And you may want a better name than 'dummy' for the dummy class ;)

Answer 2

There is no reason to go through all the values. You are looking on change of one input:

$('#lostTable input').change(function() {
    var $lostTableInput = $('#lostTable input').not(':hidden');
    if (this.value.length > 0) {
        $lostTableInput.toggleClass('R', true);
    }
    else if (this.value.length == 0 || this.value == null) {
        var found_one = false;
        $lostTableInput.each(function(index, item) {
            if (item.value.length > 0) {
                found_one = true;
                return false;
            }
        })
        if (!found_one) {
            $lostTableInput.removeClass('R');
        }
    }
})

Fiddle: http://jsfiddle.net/nYrqx/

Answer 3

why don't you do:

if(!hasDataLf){ // if every field is empty this should have remained false
   $lostTableInput.removeClass('R'); 
}

Answer 4

可能是比较器，请尝试：

if ($(this).val() == null) { $lostTableInput.removeClass('R'); }