este es mi boton de me gusta...
Código HTML
<div class="btn"> <div class="boxcoracao"> <span class="coracao" id = "<?php echo $postid?>" name = "like">br>   Love</span> </div> </div>   Jquery dentro de HTML
<script> $(".btn ").click(function(){ $('.boxcoracao .coracao', this).toggleClass("ativo"); }); </script>funciona cuando hago clic y dejo de hacer clic en el botón, el botón cambia, pero mi problema es cómo puedo usar esta función para guardar datos en mi base de datos. muestra cuando haga clic en el botón por primera vez, le gustará ... y cuando vuelva a hacer clic en el botón, no le gustará. me pueden ayudar como consultar esto
como mesa
postid | postmember | likeid 50 12 1postid por el nombre en sí, la identificación de la publicación.. postmember es la identificación del usuario que publicó la muestra que el usuario 12 publicó y la identificación es 50.. likeid es el usuario al que le gusta la publicación del otro usuario muestra que al usuario 1 le gusta la publicación del usuario 12..
Usar ajax sería una opción.
$("#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')"); } } -->Prueba esto:
$(".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 });Si la condición es como:
var selection = ''; if( $(this).val() == 'like' ) { selection = 'liked'; } else { selection = 'like'; } pase esta selection de variables en la llamada ajax() .
y en la recarga de la página, verifique el estado de la base de datos para mostrar el ícono Me gusta / No me gusta, respectivamente.
Deberá incluir una instrucción if dentro de la función de clic.
$(".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 } });