如何喜欢/不像使用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  

由名称本身后缀为帖子的ID .. postmember是发布样本用户12发布且ID为50的用户的id。 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')");
	}
		
  }

  -->

Answer 2

试试这个：

select current_timestamp(6)

如果条件如下：

$(".btn ").click(function(){ 
   $('.boxcoracao .coracao', this).toggleClass("ativo");
   // make an ajax call here to send the data to the server and save it in database
});

在var selection = ''; if( $(this).val() == 'like' ) { selection = 'liked'; } else { selection = 'like'; } 调用中传递此变量selection。

并在页面重新加载时检查数据库中的状态以分别显示/不同于图标。

Answer 3

您需要在点击功能中包含if语句。

$(".btn ").click(function(){ 
   $('.boxcoracao .coracao', this).toggleClass("ativo"); 

  if( $(this).hasClass("ativo") ) {
    // the query to exicute if the class has been added
  }
  else {
    // the query to exicute if the class has been removed
  }
});