Question

我有一个新闻源，并为它创建了一个类似的系统。我的新闻源有以下代码，并且与页面的系统部分相似：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Untitled Document</title>
        <link href="/local_home.css" rel="stylesheet" type="text/css" />
        <?php
            include '/head.php';
            include '/connect.php';
            include '/general.php';
        ?>
    </head>

    <body>
        <!-- BEGIN: Sticky Header -->
        <div id="top_container">
            <div id="header_container">
                <div id="header">
                    <a href="website.com" class="grand_button">website</a>
                </div>
            </div>
            <!-- END: Sticky Header -->
            <div class="feed_selector">
                <ul>
                    <li><a href="#">Community</a></li>
                    <li><a href="#">Local</a></li>
                    <li><a href="#">Global</a></li>
                </ul>
            </div>
        </div>
        <!-- BEGIN: Page Content -->
        <div id="container">
            <div id="content">
                <div class="select_box">
                    Feed Options
                </div>
                <!--- FEED CONTAINER ---!>
                <div class="feed_container">
                <h1>Local Feed</h1>
                    <div class="hr"></div>
                    <?php
                        $getnews = mysql_query("SELECT * FROM news ORDER BY post_id DESC") or die(mysql_error());
                        while ($row = mysql_fetch_assoc($getnews)) {
                            $id = $row['post_id'];
                            $title = $row['title'];
                            $body = $row['body'];
                            $date = $row['date'];
                            $likes = $row['post_likes'];
                            ?>
                                <div class="deals">
                                    <div class="title">
                                        <?php echo $title ?>
                                        <a class="like_button" href='#' onclick="like_add(' ,$id, ')">Like</a><br>
                                        <?php echo '<span class="like_button" id="post_', $id ,'_likes">', $likes, '</span>'?>
                                    </div>
                                    <br>
                                    <?php echo nl2br($body); ?>
                                    <br>
                                    <div class="date_time">
                                        <?php echo(time_ago($date)) ?>
                                    </div>
                                    <div class="hr"></div>
                                </div>
                            <?php
                        }
                    ?>
                </div>
            </div>
            <!-- END: Page Content -->

            <!-- BEGIN: Sticky Footer -->
            <div id="footer_container">
                <div id="footer">
                    Footer Content
                </div>
            </div>
        </div>
        <!-- END: Sticky Footer -->
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/like.js"></script>
    </body>
</html>

like.js用于更改显示的喜欢的数量。它包含两个函数，如_add和like_get。

function like_add(post_id){
    $.post('ajax/like_add.php', {post_id:post_id}, function(data){
        if(data === 'success'){
            like_get(post_id);
        }
        else{
            alert(data);
        }
    });
}

function like_get(post_id){
    $.post('ajax/like_get.php', {post_id:post_id}, function(data){
        $('#article_'+post_id+'_likes').text(data);
    });
}

我有like_add和like_get的两个ajax文件，但我只是回应正确的事情，使两个语句都能正常运行，因为他们应该测试它。

这意味着我的javacript出了问题，因为当我点击like按钮时，数字始终保持为零。我没有得到任何错误或警告，但由于一个奇怪的原因，我无法让javascript工作正常。我是javascript的新手，但逻辑似乎对我来说都是正确的。我没有在第一个代码中正确连接javascript吗？

Answer 1

也许我忽略了一些事情，但我会说你的第一个问题是你的目标是错误的元素：

您将自己的ID设为post_', $id ,'_likes，然后尝试更新article_'+post_id+'_likes

$('#article_'+post_id+'_likes').text(data);

除此之外，php中的连接完成了。不，所以我很惊讶这是在工作。像这样的一行看起来很可疑：

<?php echo '<span class="like_button" id="post_', $id ,'_likes">', $likes, '</span>'?>

为什么不这样做：

<span class="like_button" id="post_<?php echo $id; ?>_likes"><?php echo $likes; ?></span>

Answer 2

不要禁用禁用JavaScript的用户！首先，一个简单的表格就可以了：

<!-- like.php should redirect back -->
<form action="like.php" method="post" class="like-form">
    <input type="hidden" name="post_id" value="<?php echo $id; ?>">
    <input type="submit" value="Like">
    (<span class="like-counter"><?php echo $likes; ?></span> likes)
</form>

现在你有一个功能如果不是华而不实的系统。现在您可能已经注意到我在那里停留的小class="like-form"和class="like-counter"。这是故意的：它使编写JavaScript非常容易：

$(function() {
    $('.feed_container').on('click', '.like-form :submit', function(e) {
        var likeButton = $(this);
        var postID = likeButton.siblings('[name=post_id]').val();
        var likeCounter = likeButton.siblings('.like-counter');
        // like-ajax.php should increment the counter and return the new value
        $.post('like-ajax.php', { post_id: postID }, function(numLikes) {
            likeCounter.text(numLikes);
        });
        e.preventDefault();
    });
});

容易！

用于类似系统的Javascript

2 个答案: