jQuery Checkbox 有时只切换 div

Posted 2023-02-24

【中文标题】jQuery Checkbox 有时只切换 div

【英文标题】：jQuery Checkbox toggles div only sometimes

【发布时间】：2011-12-01 03:00:42

【问题描述】：

我的代码从 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>

有什么想法吗？

【问题讨论】：

你的代码真的很难理解。如果需要帮助，您可能需要隔离问题。

有很多代码要阅读......但“只是有时”对我来说有一种糟糕的初始化气味。

【参考方案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>