jQuery复选框只有时才会切换div

Question

我的代码从mysql中获取帖子。每个帖子都有一对单选按钮（类似/不喜欢），点击后，将相应的类分配给它所连接的div并将值存储在mysql中（所以当页面加载时，检查的值被调用）。该页面具有主控制复选框，单击时可显示/隐藏与相应类匹配的所有div。

例如：如果用户决定隐藏所有不喜欢的帖子，剩余的帖子是喜欢的帖子，还有那些还没有决定的帖子。这可以。然而，问题在于用户决定将喜欢的帖子改变为不喜欢的帖子（或者决定不喜欢未定的帖子）。在这种情况下，新近不喜欢的帖子就会消失（切换为隐藏不喜欢的帖子）。

已更改的值确实发送到数据库，所以它不是我的ajax是问题。

我有CSS来改变我的div的背景颜色基于类和当用户改变他的选择，背景改变，所以我知道div类也被改变，因此，这不是问题无论是。

这留下了复选框寻找div类的方式。

这里是我的代码：

<form name="myform" action="" method="post"> 
    <fieldset> 
     <legend>Master Controls</legend> 
    <div class="left"> 
      <p><input id="show_likes" name="show_likes" type="checkbox" value="1" />   
    <label for="b1">Hide Likes:</label></p> 
</div> 
<div class="right"> 
    <p><input id="show_dislikes" name="show_dislikes" type="checkbox" value="1" /> 
    <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: '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(); 
     } 
    }); 

    $("input[name*='show_dislikes']").click(function() { 
     if ($('#contest_<?php echo $row['contestID']; ?>').is('.dislike')) { 
      $('#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> 

任何想法？

Answer 1

您需要在窗体值更改时重新触发隐藏显示逻辑。我刺伤了它。当偏好无线电值改变时，它分别改变最喜欢或不喜欢的“.post”类，然后检查“.post”是否应该是可见的。

代码

<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: '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(); 
     } 
    }); 

    $("input[name*='show_dislikes']").click(function() { 
     if ($('#contest_<?php echo $row['contestID']; ?>').is('.dislike')) { 
      $('#contest_<?php echo $row['contestID']; ?>').toggle(); 
     } 
    }); 
$("input:radio[name^='pref_']").bind("shouldHide", function(event){ 
    var dislikesHidden = $("#show_dislikes").prop("checked"); 
    var likesHidden = $("#show_likes").prop("checked"); 
    var closestPost = $(this).closest(".post"); 
    if((dislikesHidden && closestPost .is(".dislike")) || 
likesHidden && closestPost.is(".like") 
){ 
     closestPost.hide(); 
    } 
}).change(function(event){ 
//if it has a class in the list, it removes it. If it does not have a class in the list, it adds it. 
    $(this).closest(".post").toggleClass("like dislike"); 
    $(this).trigger("shouldHide"); 
}); 
}); 
</script>