jquery ocultar objetos se a classe de objeto não contém um valor
Pergunta
O título pode ser um pouco confuso, basicamente, eu estou tentando escrever um script que vai pegar os valores selecionados a partir da lista drop down, e esconder-li se sua classe não contém os valores a partir da lista drop down..se isso faz sentido??Cada li tem várias classes..
Aqui está o que eu tenho até agora (desculpe se é bruto):
FORMULÁRIO:
<form action="" name="filter" id="filter" method="post">
<select name="bedrooms">
<option value="">- Select Bedrooms -</option>
<option value="bed-1">1</option>
<option value="bed-2">2</option>
<option value="bed-3">3</option>
<option value="bed-4">4</option>
<option value="bed-5">5</option>
</select>
<select name="bathrooms">
<option value="">- Select Bathrooms -</option>
<option value="bath-1">1</option>
<option value="bath-2">2</option>
<option value="bath-3">3</option>
<option value="bath-4">4</option>
<option value="bath-5">5</option>
</select>
<select name="frontage">
<option value="">- Select Frontage Size -</option>
<option value="frontage-100">100</option>
<option value="frontage-200">200</option>
<option value="frontage-300">300</option>
<option value="frontage-400">400</option>
<option value="frontage-500">500</option>
</select>
<input type="submit" name="filter-submit" id="filter-submit" value="Go" />
</form>
JQuery:
$("#filter-submit").click(function() {
var foo = [];
$("#filter :selected").each(function(i, value){
foo[i] = $(value).val();
});
if (foo) {
$.each(foo, function(index, value){
if (value) {
//hide other objects based on "value"
//$("#portfolio li").hasClass();
};
});
};
return false;
});
Ok então, onde eu estou preso é como esconder todas as "#carteira li"'s que não tem a classe que é emitida como "valor".Eu pensei que eu poderia usar hasClass, mas não sabe como reverter isso..se isso faz sentido?Qualquer ajuda seria apreciada :)
Solução
Você poderia usar .not()
e passe a aula, assim:
$("#filter-submit").click(function() {
var lis = $("#portfolio li"); //get all of the <li> elements
$("#filter select").each(function() { //loop through selected classes
var val = $(this).val(); //get selected value, could be blank
if(val) lis = lis.not('.' + val); //get only <li>s without the class
});
lis.hide(); //hide the ones without all classes
return false; //prevent default behavior
});
Outras dicas
Apenas pensei que eu iria jogar este para fora lá para se divertir.Demora um pouco diferente abordagem para esconder a <li>
elementos.Faz tudo em um seletor.
$("#filter-submit").click(function() {
var value = $('#filter select').map(function() {
return ($(this).val() || null);
}).get().join( '):not(.' );
if(value) $('#portfolio li:not(.' + value + ')').hide();// Only filter if at
}); // least one selected
O value
variável irá armazenar uma Seqüência de caracteres algo como isto:
"bed-1):not(.bath-1):not(.frontage-100"
$("#filter-submit").click(function()
{
var Portfolio = $("#portfolio");
$('li',Portfolio).show();
$("#filter selectb :selected").each(function(i){
Class = $(this).attr('value');
$('li',Portfolio).not('.' + Class).get().hide();
});
return false;
});
Dê uma chance!