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 の 2 つの関数が含まれています。

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 用の 2 つの ajax ファイルがありますが、正しいものをエコーし​​て、両方のステートメントをテストする必要があるように機能させています。

これは、いいねボタンをクリックすると数字が常にゼロのままになるため、javacript で何か問題が発生していることを意味します。エラーや警告は表示されませんが、奇妙な理由で JavaScript を正しく動作させることができません。私はJavaScriptを初めて使用しますが、ロジックはすべて正しいようです。最初のコードで JavaScript を正しく接続していませんか?

4

2 に答える 2

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>
于 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 に答える