Question

My page displays divs containing posts. The divs have the following format (where you see # is the postID in my database):

<div id="post_#>
    <div id="post_#_inside">
        <div id="like_#">
        </div>
        <div id="dislike_#">
        </div>
    </div>
</div>

Every post_# also holds a class of like or dislike.

I also have two checkboxes. Their goal is to toggle all liked posts or all disliked posts.

<form name="myform" action="" method="post">
<fieldset>
    <p class="left"><input id="show_likes" name="show_likes" type="checkbox" value="1" class="choice"/>
    <label for="b1">Hide Liked</label></p>

    <p class="right"><input id="show_dislikes" name="show_dislikes" type="checkbox" value="1" class="choice"/>
    <label for="b1">Hide Disliked</label></p>
</fieldset>
</form>

My problem is that the jQuery I have hides ALL posts, regardless of their class. Obviously, I want only the Hide Liked checkbox to hide posts with class=”like” and the Hide Disliked checkbox to hide only posts with class=”dislike”. Also, when I click the checkbox again, the post div does return, but the content inside the div remains hidden (I get the div with the backgrounds but no text).

My jQuery:

//When Hide Liked checkbox clicked, toggle all liked contests.
$("input[name*='show_likes']").click(function() {
    if ($('[id^=post_]').is('.like')) {
        $('[id^=post_]').toggle();
    }
});

//When Hide Disliked checkbox clicked, toggle all disliked contests.
$("input[name*='show_dislikes']").click(function() {
    if ($('[id^=post_]').is('.dislike')) {
        $('[id^=post_]').toggle();
    }

What is it that I’m doing wrong?
});

Answer 1

You needed to loop through your selector instead of just applying the toggle to all matches:

$("input[name*='show_likes']").click(function() {
    $('[id^=post_]').each(function() {
        if ($(this).is('.like')) {
            $(this).toggle();
        }
    });
});

But then, why do that when you can just .filter() out the unwanted elements?

$("input[name*='show_likes']").click(function() {
    $('[id^=post_]').filter('.like').toggle();
});