如何使用切换类来喜欢/不喜欢按钮

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')");
	}
		
  }

  -->

Answer 2

试试这个：

$(".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';
}

在ajax() 调用中传递此变量selection。

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

Answer 3

您需要在 click 函数中包含一个 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
  }
});