Question

So I have a loop going that pulls posts onto the page. Each post has a pair of radio buttons (like/dislike) that when pressed sends their values to my database. The page is set up to pull that information on pageload so the radio buttons are autoselected to their previous state as the user decided.

Now I want a pair of checkboxes (master controls) that show/hide all disliked and all liked posts. Problem is I have no idea how to do this… I know the logic is such that

#show_likes.click (function(){If $Mysql_value = 1  {toggle} else {ignore} });
#show_dislikes.click (function(){If $Mysql_value = 1  {toggle} else {ignore} });

This is what I already have in place:

<?php global $current_user;
get_currentuserinfo();
$userID = $current_user->ID;
?>

<div id="content">

<form name="myform" action="check.php" method="post">
    <fieldset>
        <legend>Master Controls</legend>
    <div class="left">
            <p><input id="show_likes" name="show_likes" type="checkbox" value="1" onclick="toggleLayer(this.form);" />      
    <label for="b1">Hide Likes:</label></p>
</div>
<div class="right">
    <p><input id="show_dislikes" name="show_dislikes" type="checkbox" value="1" onclick="toggleLayer(this.form);" />
    <label for="b1">Hide Disikes:</label></p>
</div>
    </fieldset>
<br><br>

   <fieldset>
        <legend>Posts</legend>

<?php
$data = mysql_query("SELECT * FROM Contests");

while($row = mysql_fetch_array( $data )){
$query = mysql_query("SELECT * FROM userContests WHERE userID='$userID' AND contestID='$row[contestID]';") or die(mysql_error()); 
$checked = mysql_fetch_assoc($query);
?>

<script type="text/javascript">
$(document).ready(function() {
    var checked = <?php echo $checked['value']; ?>;

    if (checked = 1) {
        $('#contest_<?php echo $row['contestID']; ?>').addClass('like'); 
    } else if (checked = 0) {
        $('#contest_<?php echo $row['contestID']; ?>').addClass('dislike'); 
    }

    $("input[name*='pref_<?php echo $row['contestID']; ?>']").click(function() {
        var contestID = <?php echo $row['contestID']; ?>;
        var value = $(this).val();
        var userID = <?php echo $current_user->ID; ?>;

        $.ajax({
            url: '../wp-content/themes/MC/check.php',
            type: 'POST',
            data: 'userID=' + userID + '&contestID=' + contestID + '&value=' + value,
            success: function(result) {
                $('#Message_<?php echo $row['contestID']; ?>').html('').html(result);
            }
        });
        if (value = 1) {
            $('#contest_<?php echo $row['contestID']; ?>').removeClass('dislike').addClass('like'); 
        } else if (value = 0) {
            $('#contest_<?php echo $row['contestID']; ?>').removeClass('like').addClass('dislike'); 
        }
    });

    $("input[name*='show_likes']").click(function() {
        if ($('#contest_<?php echo $row['contestID']; ?>').is('.like')) {
            $('#contest_<?php echo $row['contestID']; ?>').toggle();
        }
    });
});
</script>


<div id="contest_<?php echo $row['contestID']; ?>" class="post">
<div id="contest_<?php echo $row['contestID']; ?>_inside">
    <b><?php echo $row['Title']; ?></b><br>
    Expires: <?php echo $row['Exp']; ?><br>
    <ul id="listM"></ul>

    <form id="form_<?php echo $row['contestID']; ?>" action="/">  
        <fieldset> 
            <div class="left"><p><input id="like_<?php echo $row['contestID']; ?>" type="radio" name="pref_<?php echo $row['contestID']; ?>" value="1"<?php if ($checked['value'] == "1") echo " checked"; ?> />
            <label for="like_<?php echo $row['contestID']; ?>">Like</label></p></div>
            <div class="right"><p><input id="dislike_<?php echo $row['contestID']; ?>" type="radio" name="pref_<?php echo $row['contestID']; ?>" value="0"<? if ($checked['value'] == "0") echo " checked"; ?> />
            <label for="dislike_<?php echo $row['contestID']; ?>">Dislike</label></p></div>
                <hr />
        </fieldset>  
    </form>  
</div>
</div>
<div id="Message_<?php echo $row['contestID']; ?>"></div>

<?php 
} 
?>

</div>

Can anyone help me go from here?

Answer 1

Basically what you want to do is label each div containing a post with a class. For example use like and dislike as class names. This way when someone clicks your show_likes button, you can trigger a function which will hide all posts with class dislike and show all posts with class like. Like this for example:

$('#show_likes').click(function() {
    $('.like').show();
    $('.dislike').hide();
}

Also be sure that when someone likes or dislike a certain post, you update the class of that post.