jQuery Нажатие двух кнопок по ошибке заставляет их исчезнуть? - PullRequest
Новая
       5

jQuery Нажатие двух кнопок по ошибке заставляет их исчезнуть?

1 голос
/ 09 ноября 2011

Вот что-то, что сводит меня с ума.У меня есть две кнопки («Скрыть / Показать понравившиеся» и «Скрыть / Показать не понравившиеся»), которые при нажатии переключают все понравившиеся сообщения или переключают все не понравившиеся сообщения.

Мой код работает прекрасно, но есть одна загвоздка: если обе кнопки «включены»"(пользователь хочет скрыть все понравившиеся и все не понравившиеся), все понравившиеся и не понравившиеся сообщения фактически исчезают ... но и кнопки!

Очевидно, что кнопки не должны исчезать ни при каких обстоятельствах.Кто-нибудь может указать, почему это происходит?Нигде в моем коде я не переключаю div "mastercontrols" (где находятся кнопки).Может ли это быть проблемой CSS?Положение «mastercontrols» относительно.Переменные 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: 

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

Я думаю, что код говорит сам за себя.Я должен сказать, что эта проблема совершенно неожиданная!

...