2014-12-29 1 views
0

У меня проблема, когда .filter() работает с .css('display'), но не .css('background-color').jQuery .filter работает с .css (display), но не с .css (background-color)

Ниже приведен код, который не работает (т.е. highlighted.length = 0):

$(document).keydown(function(e){ 

var keyCode = e.keyCode; 
var $listUnit = $(".list-unit"); 

var listKeyCode = $listUnit.filter(function() { 
    return $(this).text() == keyCode; 
}); 

listKeyCode.css('background-color','blue'); 

var highlighted = $listUnit.filter(function(){ 
    return $(this).css('background-color') == 'blue'; 
}); 

console.log('highlighted',highlighted.length); 
} 

}); 

код, который делает работу (т.е. highlighted.length > 0):

$(document).keydown(function(e){ 

var keyCode = e.keyCode; 
var $listUnit = $(".list-unit"); 

var listKeyCode = $listUnit.filter(function() { 
    return $(this).text() == keyCode; 
}); 

listKeyCode.css('display','none'); 

var highlighted = $listUnit.filter(function(){ 
    return $(this).css('display') == 'none'; 
}); 

console.log('highlighted',highlighted.length); 
} 

}); 

Объяснение:

На KeyDown, мой код выбирает элемент с классом .list-unit, текстовое значение которого соответствует коду ключа события keydown, а затем меняет его фон цвет до синего. Затем код фильтрует все элементы .list-unit с background-color: blue и возвращает это значение переменной highlighted.

Переменная highlighted, однако, дает length = 0 при входе в систему. Но если вместо того, чтобы выбрать для background-color, я выбираю для display (т.е. замена всех .css('background-color','x') с .css('display','x'), переменная highlighted содержит правильную длину

Я попытался заменить background-color с backgroundColor и использованием rgb(x,x,x) вместо "blue". - без толку .

+0

какие результаты вы получите, тогда вы console.log ($ (this) .css ('background-color')); Я думаю, это поможет нам ответить на ваш вопрос. – GomatoX

+0

$ (this) .css ('background-color') = 'blue'. Это также отражается на сайте - цвет фона выбранного div изменяется на синий. Это также отражено в HTML, который показывает изменение встроенного стиля (в background-color = blue). – amliving

ответ

0

решение:

var highlighted = $listUnit.filter(function(){ 
    return $(this).css('background-color') == 'rgb(0,0,255)'; 
}); 

вместо:

var highlighted = $listUnit.filter(function(){ 
    return $(this).css('background-color') == 'blue'; 
}); 

Несмотря на то, что HTML показал style = "background-color: blue", мне нужно было использовать $(this).css('background-color') == rgb(0,0,255), чтобы правильно выбрать синий.

Смежные вопросы