4

我正在使用 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;
    });
});

谢谢。

4

2 回答 2

2

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

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

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

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

不过，不要那样做。我只是添加它来说明context参数是如何工作的。

于 2012-07-19T08:13:22.770 回答
1

假设我正确理解了您的问题，您是否希望能够保留 $(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);
 }
于 2012-07-19T08:15:51.680 回答