当进入getJSON部分时，单击的项目是否超出范围

Question

单击某个列表项时，当进入要从数据库中获取数据的getJSON部分时，是否超出范围？

我有一个显示颜色的项目列表。每个列表项都有一个设置为SKU的ID。当我点击一个列表项时，它必须从该数据库获取该SKU的数据并填充页面上的内容。

我当时玩了一些代码，并且出于兴趣的考虑，我想查看是否可以更改点击列表项的文本。所以在完成JSON调用之后，我尝试设置文本，但没有发生任何事情。

我得到的点击列表项这样的SKU：

var sku = this.id; 

后，我做的JSON调用我试图设置的这个文本点击这样的列表项：

this.text('sample text'); 

我甚至尝试：

this.Text('sample text'); 

这里是我完整的JavaScript/jQuery代码：

<script> 
    $(document).ready(function() { 
      $('.attributes li').click(function() { 
       var url = 'www.example.com/test-url'; 
       var sku = this.id; 
       $.getJSON(url, { sku: sku }, function (data) { 
        // This does not work 
        this.Text('sample text'); 
       }); 
      }); 
    }); 
</script> 

这里是我的HTML标记：

<ul class="list-inline attributes selectable"> 
    <li id="sku0001">Blue</li> 
    <li id="sku0002">Green</li> 
    <li id="sku0003">Red</li> 
    <li id="sku0004">Yellow</li> 
</ul> 

当去到getJSON节内容的this走出去的重点？点击列表项目是否超出范围？

Answer 1

是的！当它进入.getJSON时，this将丢失其上下文，并且this将参考$.getJSON的回调函数，将不再指li。我会建议外$.getJSON创建this一个实例像var that=this，然后分配that.text内$.getJSON

例子：

$(document).ready(function() { 
    $('.attributes li').click(function() { 
      var that=this; 
      var url = 'www.example.com/test-url'; 
      var sku = this.id; 
      $.getJSON(url, { sku: sku }, function (data) { 
       // this here does not work because it refers to callback function 
       that.text('sample text'); //assign with that referred previously 
      }); 
     }); 
}); 

或者，如果你正在使用ajax你添加一个额外的选项，叫做context指this里面的任何地方ajax

$('.attributes li').click(function() { 
    var url = 'www.example.com/test-url'; 
    var sku = this.id; 
    $.ajax({ 
     url : url, 
     dataType : 'json', 
     data:{sku:sku}, 
     context : this, //add this 
     complete : function (data) { 
      // 'this' will be what you passed as context 
      $(this).text('sample text') 
     } 
    }); 
});