如果 var 等于值，jQuery 切换 div 不起作用

Question

我有一个布局相当简单的页面：#show_likes 顶部的按钮可以切换所有喜欢的帖子。所有帖子（在 foreach 循环中）都包含一个带有 .like 类的按钮（like 按钮）。当 .like 被按下时，它被喜欢。现在让我们假设这是永久性的。

我有一个变量likestatus，它跟踪#show_likes 被按下的次数。当 likestatus 除以 2 没有余数时，这意味着所有喜欢的帖子都应该被隐藏。如果有剩余，所有喜欢的帖子都应该可见。很直接吧？

在页面加载时，likestatus 设置为 1，因为 1 除以 2 有余数，所以所有喜欢的帖子在页面加载时都被隐藏。这适用于 Firefox 和 chrome。

因为 likestatus 设置为 1，所以用户决定喜欢的所有帖子都应该自动切换。这适用于 Firefox，但不适用于 chrome。

问题是，为什么？

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 &rarr;', 'buddypress' ) ); ?>
        </div>
    </div> <!-- post-ID-inside -->
</div> <!-- post-ID -->

当我将 $('#post-' + postID).toggle() 更改为 $('#post-' + postID).css("visibility","hidden");它有效（尽管帖子只是不可见而不是“消失”）。关键是，代码确实可以一直工作到这一行，并且 postID 确实被识别，但是关于 chrome 的某些东西不会让切换功能..

Answer 1

你没有传递帖子 ID

$(document).on("click", ".like", function(){
    postID = $(this).attr('id').replace('like_', '');

    // Declare variables
    value = '1';

    myajax(postID); //added variable

    return false;
});

function myajax(postID){  // added variable
    // 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,
        success: function(result) {
        $('#Message_' + postID).html('').html(result).prependTo('#buttons_' + postID);
                if (result.indexOf("No") < 0){ //If return doesn't contain string "No", do this
                if (value == 1){ //If post is liked, do this
                    // If Hide Liked button is on, toggle the post
                    if (likestatus % 2 == 0) {
                    } else {
                        $('#post-' + postID).toggle();
                    }
                } 
            }
        }

Answer 2

尝试用alert('postID'); 替换行$('#post-' + postID).toggle();。如果弹出警报，那么您就知道成功函数命中了您的逻辑点。

假设警报触发，请检查以确保postID 包含有效值，并且#post-XX 是标记中的有效id 属性（其中“XX”是postID）。

另外，如果你这样调用切换会发生什么？

if ((likestatus % 2) > 0) {
    $('#post-' + postID).toggle();
}