// i am using bootstrap for design
$('.unlike-post').on('click',function(){
var $this = $(this);
var postid = $this.siblings('.submit-post').attr('post-id');
console.log('unlike ajax');
$.ajax({
type: "POST",
url: "post_comment.php",
data: { postid: postid,unlike:'yes'},
success: function() {$this.removeClass('unlike-post');
$this.html('Click to like');
$this.addClass('like-post-fb');
},
error: function(){
$this.siblings('.error').show();
}
});
});
// ajax call when calling unlike and change class to like ^^
//ajax call to like post below and change class to unlike
$('.like-post-fb').on('click',function(){
var $this =$(this);
var postid = $this.siblings('.submit-post').attr('post-id');
console.log('like ajax');
$.ajax({
type: "POST",
url: "post_comment.php",
data: { postid: postid,like:'yes'},
success: function() { $this.removeClass('like-post-fb');
$this.html('unlike');
$this.addClass('unlike-post');
},
error: function(){
$this.siblings('.error').show();
}
});
});
//up is my ajax call for both like and unlike on post_comment
<div class='btn-success btn-xs btn <?php if($flag===true){ echo 'unlike-post'; }else{echo 'like-post-fb';}?>'>
<?php if($flag===true){ echo 'unlike'; unset($flag); }else{echo 'Click to like';}?>
</div>
// in browser it toggle class unlike-post and like-post-fb after ajax success function()
// But it call repeated ajax only to one class which is available after reloading
这个怎么样?
HTML:<div id="container">
<button class="unlike-post">Unlike</button>
</div>
JS:
$('#container').on('click', '.unlike-post', function(){
// other code
});