jQuery check if text in list item corresponds to class of a div

Question

I have a dynamically created list of categories as currently follows

<ul class="filter_categories">
<li> Cat 1 </li>
<li> Cat 2 </li>
<li> Cat 3 </li>
<li> Cat 4 </li>
</ul>

I also have several dynamically created articles in the same page, these have classes that are assigned to them by wordpress, for example, one article may have the class category-cat-1, whilst another may have category-cat-2 and so on. When I click on the List Item with text "Cat 1" I want to fade out the article with class "category-cat-1".

Unfortunately I have no idea how to start this so would appreciate someone to point me in the right direction, then I can refine my question.

Answer 1

Here is one way you can do it. Hopefully you can apply this demonstration to your code.

$('.filter_categories li').click(function(){
        var liClass = $(this).html().toLowerCase().trim();
        liClass = liClass.replace(' ','-');
        $('.category-'+liClass).fadeOut();
});

http://jsfiddle.net/trevordowdle/8U3hL/

You can add

$('.category-'+liClass).stop().fadeToggle();

If you would rather have articles hide/show after each click.

Also if you need to replace more then 1 space with -

use liClass = liClass.replace(/ /g,'-'); instead.

Answer 2

You started properly with jQuery. There's many solutions of this question I will come with the first one jsfiddle

jQuery(document).ready(function(){
jQuery('article').fadeOut('fast');
jQuery('.filter_categories li').click(function(){
    var temp_object = jQuery(this);
    jQuery('article').fadeOut('fast',function(){
        jQuery('article#article-'+temp_object.attr('data-href')).fadeIn('fast');

    })

})

});

It should give you some basics of how it's working. You still need to get if() statements so for example if someone will click to fast it will not display two etc.. But it's showing the basics. I would recommend using data-href attribute. In this case it will not fail when you will have some odd names of categories (with "," for example).

I think you thought about fadeIn except of fadeOut but if not just change fadeIn with fadeOut in my sample code

Hope this helps. Feel free to ask in comments I will add more if this is not explaining to much.

Answer 3

jquery

$('.filter_categories li').on('click', function() {//on li click
    var ht = $(this).text().trim().toLowerCase().replace(/ /g,'-');//get text/convert to LC/replace
    $('.category-'+ht).stop().fadeToggle();//toggle visibility of related articles
});

made a fiddle: http://jsfiddle.net/filever10/9fDe2/

Answer 4

$(document).ready(function() {
    $('.filter_categories li').each(function(k, v) {
        $(this).click(function() {
            $('.category-cat-' + (k+1)).fadeOut();    
        });
    });
});

Answer 5

In jQuery 1.7+, you should use on. The below examples binds the event to the .filter_categories element, working like a delegate event.

A delegated-events approach attaches an event handler to only one element, the .filter_categories, and the event only needs to bubble up one level (from the clicked li to .filter_categories).

Method 1 Assuming there is a sequential naming convention that you can use such as in your question:

$(".filter_categories").on("click", "li", function() {
    var articleClass = ".category-cat-" + ($(this).index() + 1);
    $(articleClass).fadeOut();    
});

Demo: http://jsfiddle.net/hadynz/yxjNb/1/

Method 2 Assuming that your different article names and corresponing articles will not have any particular pattern, you can use the following:

<ul class="filter_categories">
    <li><a href="#" data-article="science">Cat 1</a></li>
    <li><a href="#" data-article="geography">Cat 2</a></li>
    <li><a href="#" data-article="math">Cat 3</a></li>
    <li><a href="#" data-article="history">Cat 4</a></li>
</ul>

<article class="science">
    Science Article
</article>

...

$(".filter_categories").on("click", "li a", function() {
    $("." + $(this).data('article')).fadeOut();    
});

Demo: http://jsfiddle.net/hadynz/yxjNb/2/