I'm using the glyphicons from twitter's bootstrap. When a user posts a status update, I want other users to be able to like, dislike or favorite that post. After they have liked the post, I want the color of the glyphicon to change so that they know they've pushed the button. From other stack overflow posts, I've found ways to do this without jQuery. But I want to use jQuery to accomplish it. Currently, when I use $(this).toggleClass(tst)
to add the color I want, the color doesn't change. I know my ajax is working because database is updated based on the specific post that I clicked.
The strange thing is, if I use $("#liked").toggleClass(tst), the color does change, but only on the first post that uses the #liked id. I've tried using, toggleClass, addClass, removeClass/addClass .css and also calling the $(this).toggleClass(tst) inside and outside of the function. It all comes down to the same thing: When I use this
it doesn't change colors. How can I (using jQuery) to target the specific liked button so that I can change its class.
echo "<a id='liked' href='#' <span class='glyphicon glyphicon-thumbs-up'></span> </a>";
Here is the css from twitter's bootstrap
.glyphicon-thumbs-up:before{
content:"\e125";
color: #7f8c8d;
opacity: 0.7;
}
.glyphicon-thumbs-up.tst:before{
content:"\e125";
color: green;
}
here is my jQuery
$(".glyphicon").click(function() {
var socialButton = $(this).attr('id');
//traverse the dom up until I get to this post's text. Get the text from the post
var thisPost = $(this).parent().parent().text();
//get the user name of the post
var user = $(this).parent().parent().parent().text();
$.ajax({
type: "POST",
dataType: "json",
url: "socialbuttons.php",
data: {
button: socialButton,
post: thisPost,
postAuthor: user
},
success: function(data) {
$( this ).toggleClass("tst");
alert("success")//this works
//$("#liked").toggleClass("tst"); //works, but only on first post
}
})
})