how to like/unlike with button using toggleclass

问题

this is my like button...

HTML code

<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;

Jquery inside HTML

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

it works when i click and unclick the button the button changes but what my problem is how can i use this function to save data to my database. sample when 1st click the button it will like.. and when i click the button again it will unlike. can you help me how to query this ?

like table

postid  |  postmember |  likeid   
   50          12           1  

postid by the name itself the id of the post.. postmember is the id of the user who posted sample user 12 posted and the id is 50.. likeid is the user who likes the post of the other user sample user 1 like the post of user 12..

回答1:

Using ajax would be an option.

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

  -->

回答2:

You'll need to include an if statement inside the click function.

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

回答3:

Try this:

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

If condition be like:

var selection = '';
if( $(this).val() == 'like' )
{
    selection = 'liked';
}
else
{
    selection = 'like';
}

pass this variable selection in ajax() call.

and on page reload check the status from database to show like / unlike icon respectively.

来源：https://stackoverflow.com/questions/43132514/how-to-like-unlike-with-button-using-toggleclass