Question

我正在对一个返回成功的api进行ajax调用，但是对于一个设置为undefined的变量存在轻微问题，我不知道为什么。我选择一个<i>元素并将其存储在变量中以将其显示为加载栏，然后我尝试在成功回调中再次隐藏它。

该元素已成功存储并用于在ajax调用之前显示加载栏，但是它会在成功回调中给出一个错误，指出它未定义。我对可能导致这个问题的原因感到困惑。无法在线找到任何其他解决方案。请参阅下面的代码。

奇怪的是我有<ul>元素在<i>元素之后声明，它永远不会被设置为未定义。

$("li.country").on("click", function(){
    var i = $(this).find("i"); //this is where the element is stored
    var cc = $(this).attr("data-city") + $(this).attr("data-country-code");
    var ul_week = $("#week");
    i.toggleClass("no_show"); //works fine here, shows the element
    $.ajax({
      url:        forecast_base_url + cc + units + APPID,
      success:    function(result){
        i.toggleClass("no_show"); //gives an error here
        $("#cc_city").html("This forecast for " + result.city.name + ".");
        ul_week.html("");
        for (var i = 0; i < result.list.length; i++) {
          ul_week.append(
            "<li>Hello World"+ i +"</li>"
          );
        }
        console.log(result);
      },
      error:      function(err){
        console.log(err);
      }
    });
  });

Answer 1

@charlietfl指出问题是由你的ajax回调中的变量提升引起的，而不是jQuery覆盖i中的问题。

JavaScript没有阻止范围（ES6 let除外），因此var循环中的for声明会被提升到顶部，如下所示：

$.ajax({
  url:        forecast_base_url + cc + units + APPID,
  success:    function(result){
    var i = undefined;    // variable i is hoisted up
    i.toggleClass("no_show"); //gives an error here
    $("#cc_city").html("This forecast for " + result.city.name + ".");
    ul_week.html("");
    for ( i = 0; i < result.list.length; i++) {
      ul_week.append(
        "<li>Hello World"+ i +"</li>"
      );
    }
    console.log(result);
  },

如何通过jQuery在ajax调用中将已定义的变量设置为undefined？

1 个答案: