$（this）在使用引導程序時不起作用

我使用twitter引導中的圖標。當用戶發佈狀態更新時，我希望其他用戶能夠喜歡，不喜歡或喜歡該帖子。在他們喜歡這篇文章之後，我想要改變圖形的顏色，以便他們知道他們已經按下了按鈕。從其他堆棧溢出帖子中，我找到了沒有jQuery的方法。但我想用jQuery來完成它。目前，當我使用$(this).toggleClass(tst)添加我想要的顏色時，顏色不會改變。我知道我的ajax正在工作，因爲數據庫根據我點擊的特定帖子進行更新。

奇怪的是，如果我使用$（「＃喜歡」）。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的引導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 

     } 
    }) 

    })

來源

2014-06-20 jonjon

我看到您的代碼生成了無效的HTML，即「

Can you be more specific? – jonjon

sir correct your HTML..It's nbot generating valid HTML A tag –

你和需要保留這一點因爲在阿賈克斯成功$(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 

     } 
    }) 

})

來源

2014-06-20 12:30:44

在你引用了錯誤的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 
    } 
});

來源

2014-06-20 12:29:03

添加到您的點擊功能：

var icon = $(this);

代替

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

使用

icon.toggleClass("tst");`

來源

2014-06-20 12:30:05 v42

您使用的是錯誤的「這個」，在成功處理程序 - 它指向全局的window對象（或可能指向在這種情況下一些與ajax請求相關的對象，但無論如何）。學習使用here中的「that = this」模式。

此外，你可以寫this.id而不是$(this).attr('id')。哦，並用.closest()代替級聯.parent() s。甚至更好，$('.dunno-the-classname').on('click', '.glyphicon', function() { ... }); - 查找第二個參數.on()的jQuery文檔。

來源

2014-06-20 12:33:07

$（this）在使用引導程序時不起作用

回答

相關問題