Question

我正在使用twitter的bootstrap中的glyphicons。当用户发布状态更新时，我希望其他用户能够喜欢，不喜欢或喜欢该帖子。在他们喜欢这个帖子之后，我想要改变glyphicon的颜色，以便他们知道他们按下了按钮。从其他堆栈溢出帖子，我已经找到了没有jQuery的方法。但我想用jQuery来完成它。目前，当我使用$(this).toggleClass(tst)添加我想要的颜色时，颜色不会改变。我知道我的ajax正在运行，因为数据库是根据我点击的特定帖子更新的。

奇怪的是，如果我使用$（“＃likes”）。toggleClass（tst），颜色会发生变化，但仅限于使用#liked id的第一篇文章。我尝试过使用，toggleClass，addClass，removeClass / addClass .css，并在函数内外调用$（this）.toggleClass（tst）。这一切都归结为同样的事情：当我使用this时，它不会改变颜色。我如何（使用jQuery）定位特定的喜欢按钮，以便我可以更改其类。

echo "<a id='liked' href='#' <span class='glyphicon glyphicon-thumbs-up'></span> </a>";

这是来自twitter的bootstrap的css

.glyphicon-thumbs-up:before{
    content:"\e125"; 
    color: #7f8c8d; 
    opacity: 0.7;
}

.glyphicon-thumbs-up.tst:before{
    content:"\e125"; 
    color: green; 

}

这是我的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

        }
    })

    })

Answer 1

在成功回调中，您引用了错误的this;你可以通过$.ajax()传递它来修复它：

$.ajax({
    type: "POST",
    dataType: "json",
    context: this, // <--- added
    url: "socialbuttons.php", 
    data: { 
        button: socialButton,
        post: thisPost,
        postAuthor: user
    },
    success: function(data) {
        $( this ).toggleClass("tst");
        alert("success")//this works
    }
});

Answer 2

您需要保留该对象，因为在ajax成功$(this)仅指ajax（不是当前单击的元素）

$(".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();
    var obj = $(this);

    $.ajax({
        type: "POST",
        dataType: "json",
        url: "socialbuttons.php",
        data: {
            button: socialButton,
            post: thisPost,
            postAuthor: user
        },
        success: function (data) {
            obj.toggleClass("tst");
            alert("success") //this works
                //$("#liked").toggleClass("tst"); //works, but only on first post

        }
    })

})

Answer 3

你正在使用错误的＆＃34;这个＆＃34;在成功处理程序中 - 它指向全局窗口对象（或者在这种情况下可能指向与ajax请求相关的某个对象，但无论如何）。学会使用＆＃34;那=＆＃34;来自here的模式。

此外，您可以写this.id而不是$(this).attr('id')。哦，使用.closest()代替级联.parent()。或者甚至更好，$('.dunno-the-classname').on('click', '.glyphicon', function () { ... }); - 查找jQuery文档以获取.on()的第二个参数。

Answer 4

将此添加到您的点击功能：

var icon = $(this);

而不是

$(this).toggleclass("tst");

使用

icon.toggleClass("tst");`

$（this）在使用bootstrap时无法单击

4 个答案: