如何使用toggleclass喜欢/不喜欢按钮 [英] how to like/unlike with button using toggleclass

问题描述

这是我的喜欢按钮...

this is my like button...

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>

当我单击并取消单击按钮时，它会起作用，但是按钮会更改，但是我的问题是如何使用此功能将数据保存到数据库中.第一次单击该按钮时它会喜欢的样品..当我再次单击该按钮时，它会有所不同.您能帮我查询一下吗?

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 ?

顶表

postid  |  postmember |  likeid   
   50          12           1  

postid本身就是帖子的ID.postmember是已发布样本用户12的用户的ID，且ID为50.likeid是喜欢其他用户样本用户1的帖子的用户，例如喜欢用户12的帖子的用户.

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

推荐答案

使用ajax是一种选择.

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

  -->

这篇关于如何使用toggleclass喜欢/不喜欢按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！