У меня есть страница с довольно простым макетом: кнопка сверху #show_likes переключает все понравившиеся сообщения. Все сообщения (в цикле foreach) содержат кнопку с классом .like (кнопка «Мне нравится»). Когда нажимается .like, это нравится. А пока давайте предположим, что это постоянно.
У меня есть переменная likestatus, которая отслеживает количество нажатий #show_likes. Когда у likestatus, разделенного на 2, нет остатка, это означает, что все понравившиеся сообщения должны быть скрыты. Если есть остаток, все понравившиеся сообщения должны быть видны. Довольно прямолинейно, верно?
При загрузке страницы likestatus устанавливается в 1, и поскольку 1, разделенный на 2, имеет остаток, все понравившиеся сообщения скрываются при загрузке страницы. Это работает как в Firefox, так и в Chrome.
Поскольку для likestatus установлено значение 1, все сообщения, которые, по мнению пользователя, он любит, СЛЕДУЕТ переключать автоматически. Это работает в Firefox, но не хром.
Вопрос в том, почему?
1011 * Javascript *
$(document).ready(function() {
likestatus = 1; //on pageload, likestatus is 1 so all liked posts are hidden.
$(document).on("click", ".like", function(){ //when like button is pressed do this
postID = $(this).attr('id').replace('like_', ''); // get the ID of the post
// Declare variables
value = '1'; //this represents that the post is liked to be stored in a database
myajax(); //send to database
return false;
});
function myajax(){ // Send values to database
$.ajax({
url: 'check.php', //check.php receives the values sent to it and stores them in the database
type: 'POST',
data: 'postID=' + postID + '&value=' + value, //send the post ID and like value
success: function(result) {
if (result.indexOf("No") < 0){ //If return doesn't contain string "No", do this
if (value == 1){ //If post is liked, do this
$('#post-' + postID).removeClass('dislike').addClass('like'); //sets div class of the post to liked
$('#likebtn_' + postID).removeClass('likeimgoff').addClass('likeimgon'); //changes the image of the like button so it is visibly activated
// UP TO HERE, THE CODE WOKS IN BOTH CHROME AND FIREFOX. IN CHROME, THE CODE BELOW DOESN'T WORK
// If Hide Liked button is on, toggle the post
if (likestatus % 2 == 0) {
} else {
$('#post-' + postID).toggle();
}
}
}
}
});
}
// THE CODE BELOW WORKS IN BOTH CHROME AND FIREFOX
$('#show_likes').on('click', function() { //When Hide Liked checkbox clicked, toggle all liked posts.
likestatus++; //increment likestatus
if (likestatus % 2 == 0) {
$('#hidelikedbtn').removeClass('hidelikedimgoff').addClass('hidelikedimgon'); // changes the image of the hide all liked button so it is visibly deactivated
} else {
$('#hidelikedbtn').removeClass('hidelikedimgon').addClass('hidelikedimgoff'); // changes the image of the hide all liked button so it is visibly activated
}
return false;
});
index.php
<?php global $post; ?>
<div id="show_likes">
<a id="hidelikedbtn" class="hidelikedimgoff mstrctrlL" href="#"><span></span> </a>
</div>
<?php foreach ($pageposts as $post): ?>
<?php setup_postdata($post);
$msg_id= $post->ID;
?>
<div id="post-<?php the_ID(); ?>" class="post <?php post_class(); ?>">
<div id="post-<?php the_ID(); ?>-inside" class="inside">
<h2 class="posttitle">
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e( 'Permanent Link to', 'buddypress' ) ?> <?php the_title_attribute(); ?>"><?php the_title(); ?></a>
</h2>
<div id="like_<?php the_ID(); ?>" class="like">
<a id="likebtn_<?php the_ID(); ?>" class="likeimgoff" href="#"><span></span></a>
</div>
<div class="entry">
<?php the_content( __( 'Read the rest of this entry →', 'buddypress' ) ); ?>
</div>
</div> <!-- post-ID-inside -->
</div> <!-- post-ID -->
Когда я меняю $ ('# post-' + postID) .toggle () на $ ('# post-' + postID) .css ("видимость", "скрытый"); это работает (хотя пост просто невидим, а не "ушел"). Дело в том, что код работает вплоть до этой строки, и postID распознается, но что-то в chrome просто не позволяет функции переключения ..