Question

我正在使用ajax制作一个小型投票应用。当您单击+1以对项目进行投票时，以下代码将运行，在其投票计数中添加一个，然后php将按投票返回重新排序的项目列表。我想要的是投票的项目变成绿色。更改颜色的代码必须在重新排序和检索项目后运行。

下面是一个代码块。介于两者之间的文本正在讨论特定部分正在做什么。

$(function(){
  $(".plus").live('click', function() {
      var plus = $(this).data('plus');
      var dataString = "plus="+plus;

下一行代码获取带有类.heading的单击按钮的父元素，并将其背景颜色设置为绿色，以显示它已被投票。这种方法很好，除了你只看到它一秒钟，因为项目被投票成功后，它们被检索并再次输出以通过投票重新排序。

$(this).parents(".itemheading").stop().animate({ backgroundColor: "#cdeb8b"}, 100);

        $.ajax({
      type: "POST",
      url: "bin/processButtons.php",
      data: dataString,
      success: function() {

        $.ajax({url: 'retrieve.php', dataType: 'json'}).done(function(data) {


            var html = data['html'];
            $('#content')
                .html(data['html'])

我想要做的是将代码行移动到此处，以便在项目被投票然后检索之后动画颜色。它不再有效，因为在点击按钮后需要在按钮上完成$(this)。

 $(this).parents(".itemheading").stop().animate({ backgroundColor: "#cdeb8b"}, 100); 
    });
      }
     });
    return false;
    });
});

感谢。

Answer 1

您可以将context参数传递给$.ajax，以手动设置上下文。

$.ajax({ context: this, url: ... }).done(function() {
   // $(this) still yields the clicked button
});

同样，如果你想变得奇怪，也是有效的：

$.ajax({ context: $, url: ... }).done(function() {
    this('#my-button').remove();
});

但是，不要这样做。我刚刚添加它来说明context参数的工作原理。

Answer 2

假设我正确理解你的问题，你希望能够保留$（this）以供日后使用吗？

在这种情况下，您应该只能将其存储在变量中：

var reference = $(this);

//A chunk of code.

$.ajax({url: 'retrieve.php', dataType: 'json'}).done(function(data) {
    //The HTML stuff...
    reference.parents(".itemheading").stop().animate({ backgroundColor: "#cdeb8b"}, 100);
}

应该这样做。如果在函数中定义引用，则应该能够在该函数中定义的任何AJAX成功函数内访问它（如果有意义的话）。

另一种方法是按照我们在下面的评论中讨论的那样 - 使用您的PHP为每个答案分配一个特定的ID并存储对它的引用......

var reference = $(this).attr("id");
//A chunk of code.

$.ajax({url: 'retrieve.php', dataType: 'json'}).done(function(data) {
    //The HTML stuff...
    $("#" + reference).parents(".itemheading").stop().animate({ backgroundColor: "#cdeb8b"}, 100);
 }

稍后在代码中访问$（this）

2 个答案: