自动为用户添加喜欢

Question

我想添加用户喜欢在页面加载上发帖，即如果用户已经喜欢该帖子但它不起作用，我想让喜欢的按钮显示喜欢，这是我的ajax代码for (var l = 0; l < 5; l++) {          this_comment_id = $('#like_check_'+l).attr('data-id');              $.ajax({                      url:"comment_post.php",                      type: 'POST',                     data:{comment_check:this_comment_id},                      dataType: 'text',                      success:function(data)                    {                            if (data.search("ok") > -1) {                                $('#like_check_'+l).addClass("red_heart");                          }else if(data.search("unliked") > -1){                                $('#like_check_'+l).removeClass("red_heart");                          }                    }              })    }它的目的是将 red_hearth 添加到用户在此 html 元素中喜欢的帖子中<i onclick="like_post(this)" class="fas fa-heart float-right p-1 my-1 mr-3" data-id="1" id="like_check_0" data-toggle="tooltip" data-placement="top" title="I like it"></i><i onclick="like_post(this)" class="fas fa-heart float-right p-1 my-1 mr-3" data-id="2" id="like_check_1" data-toggle="tooltip" data-placement="top" title="I like it"></i><i onclick="like_post(this)" class="fas fa-heart float-right p-1 my-1 mr-3" data-id="3" id="like_check_2" data-toggle="tooltip" data-placement="top" title="I like it"></i><i onclick="like_post(this)" class="fas fa-heart float-right p-1 my-1 mr-3" data-id="4" id="like_check_3" data-toggle="tooltip" data-placement="top" title="I like it"></i><i onclick="like_post(this)" class="fas fa-heart float-right p-1 my-1 mr-3" data-id="5" id="like_check_4" data-toggle="tooltip" data-placement="top" title="I like it"></i>

Answer 1

因为我确实不使用 jQuery，所以尝试使用它来回答问题是愚蠢的，因此会犯错误，所以请理解，这就是为什么我在这里用普通的 Javascript 来回答。不知道表模式、函数的作用like_post或某人如何做某事unlike都会提出问题，但做出某些假设，人们可以在这里忽略这一点。

如果您稍微修改 HTML 以删除 ID 属性（这实际上不是必需的）

<i class='fas fa-heart float-right p-1 my-1 mr-3' data-id='1' data-toggle='tooltip' data-placement='top' title='I like it'></i>

<i class='fas fa-heart float-right p-1 my-1 mr-3' data-id='2' data-toggle='tooltip' data-placement='top' title='I like it'></i>

<i class='fas fa-heart float-right p-1 my-1 mr-3' data-id='3' data-toggle='tooltip' data-placement='top' title='I like it'></i>

<i class='fas fa-heart float-right p-1 my-1 mr-3' data-id='4' data-toggle='tooltip' data-placement='top' title='I like it'></i>

<i class='fas fa-heart float-right p-1 my-1 mr-3' data-id='5' data-toggle='tooltip' data-placement='top' title='I like it'></i>

然后你可以从 HTML 元素中收集data-id值 - 大概这些值并不总是简单的，1,2,3,4,5但实际上是来自文章或数据库的 ID - 所以实际上可能更像23,6,98,123,5（？）

var iCol=document.querySelectorAll( 'i[data-id]' );

var ids=[];

iCol.forEach( i=>{

    ids.push( i.dataset.id )

});

有了所有相关的 ID，您就可以向服务器发出单个 Ajax 查询，服务器将使用这些 ID 来处理用户things之前喜欢的用户。由于以下内容是基本的jQuery，仅对原始内容进行了轻微修改，因此我在这里使用它而不是使用XMLHttpRequest或Fetch

$.ajax({  

    url:'comment_post.php',  

    type:'POST', 

    data:{ comment_check:ids },  // send the collected IDs

    dataType:'text',  

    success:function(json){

        json.liked.forEach( id => {

            document.querySelector('i[ data-id="'+id+'" ]').classList.add('red_heart')

        })

    }

});

检查数据库的 PHP 脚本：

<?php

    session_start();

    

    if( isset( $_POST['comment_check'] ) ) {

        

        $payload=[];

        $ids=explode( ',', $_POST['comment_check'] );

        

        $sql='select `comment_id` from `comment_like` where `liker_id`=? and `liked`="Y"';

        $stmt=$con->prepare( $sql );

        $stmt->bind_param( 's', $_SESSION['user_id'] );

        $status=$stmt->execute();

        $stmt->bind_result( $cid );

        

        

        $payload['status']=$status;

        $payload['user_id']=$_SESSION['user_id'];

        $payload['liked']=[];

        

        

        while( $stmt->fetch() ){

            if( in_array( $cid, $ids ) ) $payload['liked'][]=$cid;

        }

    

        

        header('Content-Type: application/json');

        exit( json_encode( $payload ) );

    }

?>