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>