Question

我仍然习惯于ES6（不是我曾经是ES5的专家），promise的概念有点让我丧命。

（很抱歉，我不能在工作中使用JSFiddle。）

我有一个事件监听器，单击该事件监听器正在检索网页（HTML）。我正在利用jQuery的ajax方法进行提取。我的目标是在拉出的网页中查找值后更改样式（现在为颜色）。

$("a").each(function(index) {
  this.addEventListener("click", function(evt) {
    $.ajax(this.href)
      .done(function(html) {
        var int1 = parseInt($($.parseHTML(html)).find("int1").text());
        if (int1 > 0) {
          this.style.color = "blue";  // this 'this' doesn't refer to the anchor.  It refers to the function I think
        }
      }
    });
  });
});

（我想我把所有方括号都括起来了）

我尝试在.then()之后进行.done()，但是遇到了同样的问题。

有没有办法引用从done函数内部发起ajax调用的锚点？还是有更好的方法呢？

Answer 1

有两种方法可以完成您想要的事情：

第一种方法是缓冲，这种方法是设置一个可从内部范围访问的外部范围变量（缓冲区）。

$("a").each(function(index) {
  this.addEventListener("click", function(evt) {
    var that = evt.target; // or "this"
    $.ajax(this.href)
      .done(function(html) {
        var int1 = parseInt($($.parseHTML(html)).find("int1").text());
        if (int1 > 0) {
          that.style.color = "blue";  
        }
      }
    });
  });
});

第二种方式是代理，通过这种方式，您可以将this关键字的上下文设置为所需的任何内容。

$("a").each(function(index) {
  this.addEventListener("click", function(evt) {
    $.ajax(this.href)
      .done($.proxy(function(html) {
        var int1 = parseInt($($.parseHTML(html)).find("int1").text());
        if (int1 > 0) {
          this.style.color = "blue";
        }
      }, this);
    });
  });
});

参考：https://api.jquery.com/jQuery.proxy/

Answer 2

塔普拉（Taplar）到重复副本的链接回答了我的问题。

答案是在调用$.ajax()之前声明变量。

（对不起，塔哈。我以为我已经发布了此回复。）

$("a").each(function(index) {
  this.addEventListener("click", function(evt) {
    var anchor_element = this;
    $.ajax(anchor_element.href)
      .done(function(html) {
        var int1 = parseInt($($.parseHTML(html)).find("int1").text());
        if (int1 > 0) {
          anchor_element.style.color = "blue";
      }
    });
  });
});

如何在另一个函数中一次引用父元素？

2 个答案: