时间戳

首页 > 解决方案 > 如何在另一个函数中引用父元素？

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

问题描述

我还在习惯 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 调用的锚点，或者有更好的方法来做到这一点？

标签： javascriptjqueryajax

解决方案

有两种方法可以做你想做的事：

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

$("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/

推荐阅读