Question

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

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

在页面加载时，likestatus设置为1，因为1除以2有余数，所有喜欢的帖子都隐藏在pageload上。这适用于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

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

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

另外，如果你这样调用切换怎么办？

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

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

2 个答案: