jQuery错误地单击两个按钮会使它们消失吗？

有件事让我抓狂。我有两个按钮（Hide/Show liked和Hide/Show disliked），单击时可以切换所有喜欢的帖子或切换所有不喜欢的帖子

我的代码运行得很好，但有一个问题：如果两个按钮都“打开”（用户希望隐藏所有喜欢和不喜欢的内容），那么所有喜欢和不喜欢的帖子实际上都会消失。。。但按钮也是如此

显然，按钮在任何情况下都不应消失。有人能指出为什么会发生这种情况吗？在我的代码中，我没有切换div“mastercontrols”（按钮所在的位置）。这可能是一个CSS问题吗？“主控件”的位置是相对的。变量likestatus和dislikestatus是全局的，这是有原因的——它们用于其他函数中

jQuery：

$(document).ready(function() {
likestatus = 1;
dislikestatus = 1;

//When Hide Liked checkbox clicked, toggle all liked posts.
$('#show_likes').on('click', function() {
    countlikes = $('[id^=post_].like').length;

    if (countlikes >0) {
        likestatus++;

        $('[id^=post_].like').toggle();

        if (likestatus % 2 == 0) {
            $('#hidelikedbtn').removeClass('hidelikedimgoff').addClass('hidelikedimgon');
        } else {
            $('#hidelikedbtn').removeClass('hidelikedimgon').addClass('hidelikedimgoff');
        }
    }

    return false;
});

//When Hide Disliked checkbox clicked, toggle all disliked posts.
$('#show_dislikes').on('click', function() {
    countdislikes = $('[id^=post_].dislike').length;

    if (countdislikes >0) {
        dislikestatus++;

        $('[id^=post_].dislike').toggle();

        if (dislikestatus % 2 == 0) {
            $('#hidedislikedbtn').removeClass('hidedislikedimgoff').addClass('hidedislikedimgon');
        } else {
            $('#hidedislikedbtn').removeClass('hidedislikedimgon').addClass('hidedislikedimgoff');
        }
    }

    return false;
});
}); 

HTML:

---

我认为代码本身就说明了问题。我不得不说这个问题完全出乎意料

你有我们能看到的css吗？jQuery看起来不错，如中所示，我想你可以理解为什么我对自己的问题如此困惑。是的，非常奇怪。您是否将其安装在服务器上，以便world+dog能够看到？我通过定义#MasterControl的宽度和高度，成功地解决了这个问题。我无法理解为什么这是必要的。

<div id="mastercontrols">
<div id="show_likes" style="position:absolute;">
    <a id="hidelikedbtn" class="hidelikedimgoff" href="#"><span></span></a>
</div>

<div id="show_dislikes" style="position:absolute; right: 0em;">
    <a id="hidedislikedbtn" class="hidedislikedimgoff" href="#"><span></span></a>
</div>
</div>

<?php 
$data = mysql_query("SELECT * FROM Posts") or die(mysql_error());
while($row = mysql_fetch_array( $data )){ 
?>

<div id="post_<?php echo $row['contestID']; ?>" class="post">
<div id="post_<?php echo $row['contestID']; ?>_inside" class="inside">
    <b><?php echo $row['Title']; ?></b><br>
    <?php echo $row['Description']; ?><br>
</div>
</div>

<?php
}
?>

a.likeimgoff {
float: right;
background: url(images/entered.png) no-repeat top center;
height: 30px;
width: 28px;
}

a.likeimgoff:active, a.likeimgoff:hover{
float: right;
background: url(images/entered.png) no-repeat bottom center;
height: 30px;
width: 28px;
}

a.likeimgon {
float: right;
background: url(images/entered.png) no-repeat bottom center;
height: 30px;
width: 28px;
}

a.likeimgon:active, a.likeimgon:hover{
float: right;
background: url(images/entered.png) no-repeat top center;
height: 30px;
width: 28px;
}

a.dislikeimgoff {
float: right;
background: url(images/not-interested.png) no-repeat top center;
height: 30px;
width: 28px;
}

a.dislikeimgoff:active, a.dislikeimgoff:hover{
float: right;
background: url(images/not-interested.png) no-repeat bottom center;
height: 30px;
width: 28px;
}

a.dislikeimgon {
float: right;
background: url(images/not-interested.png) no-repeat bottom center;
height: 30px;
width: 28px;
}

a.dislikeimgon:active, a.dislikeimgon:hover{
float: right;
background: url(images/not-interested.png) no-repeat top center;
height: 30px;
width: 28px;
}

.inside {
position: relative;
padding: 0 0 7em 0;
}

#mastercontrols {
position: relative;
}

a.hidelikedimgoff {
float: left;
display: block;
background: url(images/entered.jpg) no-repeat top center;
height: 30px;
width: 150px;
}

a.hidelikedimgon {
float: left;
display: block;
background: url(images/entered.jpg) no-repeat bottom center;
height: 30px;
width: 150px;
}

a.hidedislikedimgoff {
float: right;
display: block;
background: url(images/not-interested.jpg) no-repeat top center;
margin-right: 40px;
height: 30px;
width: 150px;
}

a.hidedislikedimgon {
float: right;
display: block;
background: url(images/not-interested.jpg) no-repeat bottom center;
margin-right: 40px;
height: 30px;
width: 150px;
}