类似系统的Javascript

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

<!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);
    });
}

我有两个ajax文件的like_add和like_get，但我只是呼应正确的事情，使这两个语句工作，因为他们应该测试它。

这意味着我的javascript中出现了问题，因为当我单击like按钮时，数字总是保持为零。我没有得到任何错误或警告，但由于一个奇怪的原因，我不能得到javascript工作正确。我是新的javascript，但逻辑似乎都是正确的我。我没有在第一个代码正确连接javascript吗?

也许我忽略了一些东西，但我想说你的第一个问题是你瞄准了错误的元素:

你给你的喜欢一个post_', $id ,'_likes的id，然后尝试更新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>

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

简单!

相关内容

最新更新

热门标签：