Question

这是让我疯狂的事情。我有两个按钮（隐藏/显示喜欢和隐藏/显示不喜欢），点击后，切换所有喜欢的帖子或切换所有不喜欢的帖子。

我的代码工作得很漂亮，但有一个问题：如果两个按钮都“打开”（用户希望隐藏所有喜欢的和所有不喜欢的），所有喜欢和不喜欢的帖子确实会消失......但按钮也是如此！

显然，在任何情况下按钮都不应消失。任何人都可以指出为什么会这样吗？在我的代码中没有任何地方我切换div“mastercontrols”（这是按钮所在的位置）。这可能是一个CSS问题吗？ “主控制”的位置是相对的。像status和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：

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

CSS：

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

我认为代码不言而喻。我不得不说这个问题完全出乎意料！

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

0 个答案: