jquery - 如何使用 toggleclass 喜欢/不喜欢按钮

Question

这是我的赞按钮...

HTML代码

<div class="btn"> 
  <div class="boxcoracao">
    <span class="coracao" id = "<?php echo $postid?>" name = "like">br>&emsp;&emsp;&emsp;Love</span>
  </div>
</div>&emsp;&emsp;&emsp;

HTML 中的 Jquery

<script>
 $(".btn ").click(function(){ 
   $('.boxcoracao .coracao', this).toggleClass("ativo"); 
}); 
</script>

当我单击并取消单击按钮时，按钮会发生变化，但我的问题是如何使用此功能将数据保存到我的数据库中。第一次单击它会喜欢的按钮时的示例。当我再次单击该按钮时，它会不一样。你能帮我查询这个吗？

喜欢表格

postid  |  postmember |  likeid   
   50          12           1  

postid 名称本身是帖子的 id.. postmember 是发布示例用户 12 发布的用户的 id，id 是 50.. likeid 是喜欢其他用户的帖子的用户样本用户1喜欢用户12的帖子..

Answer 1

使用 ajax 是一种选择。

$("#postWrapper").on("click", ".likeToggle", function(){
	
	// grabe the variables you need

	var postid = $("#postid").attr("data-postid"); //postid
	var postmember = $("#postmember").attr("data-postmember"); // postmember
	var likeid = $("#likeid").attr("data-likeid"); // likeid

  $(this).toggleClass("likeColor");
  
  if ($(this).hasClass("likeColor")){
    
    console.log("LIKE");    
    $(this).text("dislike"); // update the text to show what the next click would be
    togglePost("like", postid, postmember,likeid); // run function
    
  } else {
  
    console.log("DISLIKE");
    $(this).text("like"); // update the text to show what the next click would be
    togglePost("dislike", postid, postmember,likeid); // run function
    
  }
 // send ajax to process.php

 
 function togglePost(action, postid, postmember, likeid){
	
  $.ajax({
        type: "post",
        url: "process.php",
        data: "action="+action+"&postid="+postid+"&postmember="+postmember+"&likeid="+likeid,
        success: function(data){
         
         alert("success");
          
        },
        error: function(e){
         alert("error");
        }
      });
      

 }

  });

.likeColor {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<!-- index.php -->
<div id="postWrapper">
  <span id='postid' data-postid="50">POST ID: 50</span>
  <span id='postmember' data-postmember="12">CREATED BY: 12</span><br><br>
  <p>post contents are written here....</p><br>
  <br><hr><br>
  <div id='likeid' data-likeid="10">currently LOGGED IN as Member: 10</div><br>
 
  <button class="likeToggle">like</button>
</div>

<!-- process.php -->
<!--

  /*
  // you need to add 1 more row here and call it id and make it autoincrement INT or inserts wont work.
  
id = 1 | postid = 50 | postmember = 12 | likeid = 1
id = 2 | postid = 50 | postmember = 12 | likeid = 22
id = 3 | postid = 50 | postmember = 12 | likeid = 1001
id = 4 | postid = 50 | postmember = 12 | likeid = 21
id = 5 |postid = 50 | postmember = 12 | likeid = 44
*/

   $action = $_POST['action'];
   $likeid = $_POST['likeid'];
   $postmember= $_POST['postmember'];
   $postid = $_POST['postid']

 UpdateLikes($postid, $postmember, $likeid, $action);
  
 function UpdateLikes($postid, $postmember, $likeid, $action){
		
	if ($action == "dislike"){
		$query = mysql_query("DELETE FROM liketable WHERE 
			postid = '$postid' &&
			likeid = '$likeid'
			");
	} else {
		
		// before inserting you might want to check if they alredy liked or not before adding their count again.
		$query = mysql_query("INSERT INTO liketable
			( postid,  postmember, likeid ) VALUES 
			  ('$postid','$postmember','$likeid')");
	}
		
  }

  -->