0

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

<!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 用于更改显示的喜欢的数量。它包含两个函数like_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 吗？

4

2 回答 2

1

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

你给你喜欢的 idpost_', $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>
于 2013-05-14T01:06:55.037 回答
0

不要歧视禁用 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();
    });
});

简单的！

于 2013-05-14T01:54:48.470 回答