Search jQuery

jQuery Forum

Easy filter script

in Using jQuery • 7 years ago

Hello

I'm trying to do an easy filter script to show the elements I want to see depending the option I've chosen. I don't want to use an external script. I'd like to do it by myself.

On the one hand, I have the option in two lists

<ul class =" provincias ">
<li data-provfil =" 6 ">Text</li>
...
</ul>
<ul class =" categorias ">
<li data-catfil =" 6 ">Text</li>
...
</ul>

and, on the other hand, I've the elements:

<section>
<article>
<header>
<h4>
<span class="cat" data-cat="1">Categy 1</span>
....
in
<span class="prov" data-prov="5">Province 1</span>
....
</h4>
</header>
</article>
...
</section>

I used '....' in order to tell the element may repeat.

And, finally, the jQuery Script is

<script>
$(document).ready(function() {
$('article')
.mouseenter(function() {
$( this ).css('opacity','0.5');
})
.mouseleave(function() {
$( this ).css('opacity','1');
})
.click(function(){
alert('show the details of ' + $(this).find('h2').text());
});
$('aside div ul li')
.click(function(){
if($(this).data('provfil')){
var iddata = 'prov';
var actprov = $(this).data('provfil');
}else{
var iddata = 'cat';
var actprov = $(this).data('catfil');
}
if(!$(this).children().hasClass('quitar-filtro')){
$(this).append(' <span class="quitar-filtro">X</span>');
$(this).show().siblings().hide();
$("[data-"+iddata+"!="+actprov+"]")
.closest('article')
.hide(1000);
$("[data-"+iddata+"="+actprov+"]")
.closest('article')
.show(1000);
}else{
$(this).remove();
$(this).closest('ul').children().show();
$("[data-"+iddata+"!="+actprov+"]")
.closest('article')
.show(1000);
}
});
});
</script>

I'm sure is very basic.

What problem am I having?

1. When I restore the elements (clicking on .quitar-filtro) the list elements don't appear again.

2. When I click on .quitar-filtro the article elements appear again ignoring the other filter applied

3. and finally, I'd really like to get a more visual attractive effect than show(1000) and hide(1000) for the article elements.

Could you please help me?

I'd be very grateful for some advice

THANKS

Replies(16)

Sµßhrånil∂

Re: Easy filter script

7 years ago

Difficult to predict because you didn't provided complete html you have.

Better create a jsfiddle or plunkr page.

ladobonli..

Re: Easy filter script

7 years ago

Thank you for your reply!

Here it is

http://jsfiddle.net/ladobonline/9mf8828e/4/

Sµßhrånil∂

Re: Easy filter script

7 years ago

Check this

http://jsfiddle.net/9mf8828e/5/

After clicking on 'X' all li's are coming now

ladobonli..

Re: Easy filter script

7 years ago

THANK YOU!!

You've changed this, right?

$(this).find('span.quitar-filtro').remove();

$(this).siblings('li').show();

The other problem I'm having is to combine both filters in orther to apply both or just one. Depending wich are selected.... do you have any idea how to solve it? What am I doing wrong? Any clue?

THANK YOU AGAIN

Sµßhrånil∂

Re: Easy filter script

7 years ago

Yeah i changed that and now fixing the filtering

Will post updated fiddle once done

ladobonli..

Re: Easy filter script

7 years ago

THANK YOU! (But I'm not pretending you work for me

) I just want to understand why is not working. What am I doing wrong. I.E. I've tried this (in order to not hide before to show the articles) and it not works :(

$("[data-"+iddata+"="+actprov+"]")
.closest('article')
.show(1000)
.siblings()
.hide(1000);

Do you know why?

THANKS AGAIN FOR YOUR HUGE HELP!

Sµßhrånil∂

This way it will not work and as you have two spans for each article and some time what happening, one is hide by Province but showing by Category which isn't correct. Need to fix that.

Like 1st short by Province 3 and you will have result like
"Categy 2 in Province 3 " and "Categy 1 in Province 3 " which is correct.

Now on top of that filter apply Category 1 filter again and result should show "Categy 1 in Province 3 " but your filter showing

"Categy 1 in Province 1 " and "Categy 1 in Province 3 " as your script shown all span has same category but didn't check what else filter selected for Province. Give me few i will fix it and will update

Sµßhrånil∂

Re: Easy filter script

7 years ago

Here is updated one

http://jsfiddle.net/subhranild/9mf8828e/7/

When you show/hide some article then you need to check the combination of both Province and Category matched/present in that article. If you check one of them then it will be problem as 1st filter hide some thing and 2nd filter should reduce that list more but its showing more element as you are checking current clicked element not the previously clicked.

Test it like click Province 3 then Category 1 or by Category 1 and Province 1/Province 3 and also you can see the remove one also.

ladobonli..

Re: Easy filter script

7 years ago

THANK YOU!!! It's working!! Two more questions:

Do you know how to update the information between filters? I mean: the information comes from a database. I. E.

CAT 1 (of province 1)

CAT 2 (of province 2)

When I see the list I could click on cat1, cat2, province1 or province2 BUT if I select CAT1, I should update the provinces in order to block the province 2.... is that possible?

And FINALLY (

) Do you know another visual effect more fancy.... :s

THANK YOU ONE (AND THOUSANDS) TIMES!

ps- Now the articles appear and disappear all together and it's not pretty.... how could I show/hide one by one (loop?)

Sµßhrånil∂

Re: Easy filter script

7 years ago

Can't predict without seeing your HTML.

For more animation you can check jQuery UI Effects | jQuery UI Documentation

But now a days all types of animations can be done by CSS3.

For show/hide articles one by one, you can do it in a loop with adding some interval like 1000+i and increase i by 200 but that will be very time taking if you have hundreds of articles.

ladobonli..

Re: Easy filter script

7 years ago

Yes, you are right. I should use CSS and forget about to animate one by time

THANK YOU AGAIN

ladobonli..

Re: Easy filter script

7 years ago

Hello again

After trying with CSS I've decided to use a simple .fadeIn() instead of .show() and I like!

The last problem I should have to solve is to connect the two selection lists.

I updated the jsfiddle

http://jsfiddle.net/ladobonline/9mf8828e/9/

in order to show you what I mean.

When you select the category 2 you get two elements, one of the province 3 and the other one of the province 1. How could I hide the province 2 (because there is no one of that)?

Thank you again

Sµßhrånil∂

Re: Easy filter script

7 years ago

Your fiddle isn't giving me correct result as you said. I clicked category 2 and i am getting Categy 2 in Province 3 twice. Your markup problem.

ladobonli..

Re: Easy filter script

7 years ago

Hello!

I've just modified. The thing is, how could I connect the non-filter list with the elements listed. I mean, If I have Category 2 selected and nothing selected in provinces BUT there is no one of Province 2 (just Province 1 and Province 3) I'd like to hide Province 2 automatically from the list (because is empty). Do you understand what I mean?

Thanks

Sµßhrånil∂