jQuery Case à cocher bascule div seulement parfois

Question

Mon code tire des messages de mysql. Chaque article a une paire de boutons radio (comme/n'aime pas) qui, au clic, assigne la classe appropriée au div auquel il est attaché et stocke la valeur dans mysql (ainsi quand la page se charge, les valeurs vérifiées sont rappelées). La page a des cases à cocher de contrôle principal qui, lorsqu'on clique dessus, affiche/cache toutes les divs qui correspondent à la classe appropriée. Par exemple: Si l'utilisateur décide de masquer tous les messages détestés, les posts restants sont ceux qui lui sont préférés et ceux qui n'ont pas encore été décidés. C'est bon. Le problème cependant, est dans la situation où l'utilisateur décide de changer un poste aimé en un poste détesté (ou prend la décision de ne pas aimer un poste indécis). Dans cette situation, le post nouvellement détesté ne disparaît pas comme il se doit (le passage pour masquer les messages détestés est activé).

Les valeurs modifiées sont en effet envoyées à la base de données donc ce n'est pas mon ajax qui est le problème. J'ai un CSS pour changer la couleur d'arrière-plan de mes divs en fonction de la classe et quand l'utilisateur change sa sélection, l'arrière-plan change donc je sais que la classe div est aussi changée et en tant que tel, ce n'est pas le problème non plus. Cela laisse le problème dans la façon dont les cases à cocher recherchent les classes div.

Voici mon code:

<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> 

Toutes les idées?

Answer 1

Vous devez redéclencher la logique de masquage pour les changements de valeurs de formulaire. J'ai pris un coup de couteau. quand une valeur radio préférée est changée, elle modifie la classe ".post" la plus proche à être aimée ou détestée respectivement, puis vérifie si le ".post" doit être visible.

Code

<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>