Question

如果使用jQuery遇到问题，我不知道如何修复它。简单地说我得到了以下内容：

var overlay;

if(condition == "test") {
    overlay = $("<div></div>");
}
else if (condition == "test2") {
    console.log("first-log");
    overlay = $("<span></span>");
}

console.log("second-log");
overlay.prependTo("body");

如果条件与'if'匹配，一切正常，叠加内容将填充内容并将添加到正文中。

当条件与'else if'匹配时，我得到一个错误，即覆盖未定义。

所以我推出了一些console.log（）来查看我的代码在做什么。两个console.log操作都被触发，但在我的浏览器控制台中，我首先看到'second-log'，之后是'first-log'。

我的代码在'if / else if'完成之前尝试prepend，即使条件匹配。

我试着寻找答案，但我根本找不到任何东西，所以我希望有人可以帮助我。谢谢！

jsfiddle of my code

Answer 1

您应该在程序开头初始化var overlay。

Answer 2

我主要通过回调或承诺来解决这类问题。有了回调你可以试试这个：

var overlay = $("");

testCondition = function(callback) {

  if(condition == "test") {
    overlay = $("<div></div>");
  }
  else if (condition == "test2") {
    console.log("first-log");
    overlay = $("<span></span>");
  }

  callback(overlay);

}

并像这样调用此函数：

testCondition(function(callback){
   overlay.prependTo("body");
});

这是fiddle

您可以在控制台中查看，正确的元素会被添加到前面;）

Answer 3

您的代码似乎没有任何问题，我只是测试了它并且它正在运行！

您的代码已经过测试 - http://jsfiddle.net/9Pb7u/

如果所有其他方法都失败了，那么简单的解决方法就是将prependTo放在if语句中 - 同时确保在div和span中添加一些文本或样式，否则它们可能在看起来不可见之前在源头。

if(condition == "test") {
    $("<div>TEST</div>").prependTo("body");
} else if (condition == "test2") {
    $("<span>TEST 2</span>").prependTo("body");
}

工作http://jsfiddle.net/9f93d/

Answer 4

问题的关键在于使用jsfiddle代码进行更新。基于你的jsfiddle链接，它似乎有这个基本结构：

if (resource=="iframe") {
  console.log("resource is iframe");

} else if (resource=="json") {
    $.getJSON("someUrl", function(data) {
        console.log("resource is json");
    });
}

console.log("at the end - one of the above log statements should be hit");

但是，我认为您尝试简化问题的问题是您处理resource=="json"的情况未被发现。

这很可能是因为对getJSON的调用是异步执行 - if块中没有内联执行的函数，当你期望它时，但稍后，当getJSON调用有结果时，以及之后的函数外部函数的其余部分已完成执行

解决此问题的一种方法是使用回调更改结构（类似于Igle's answer），以确保您的处理代码在之后才会执行：

function executeAfterIf() {
    console.log("at the end - one of the above log statements should be hit");
}

if (resource=="iframe") {
  console.log("resource is iframe");
  executeAfterIf();

} else if (resource=="json") {
    $.getJSON("someUrl", function(data) {
        console.log("resource is json");
        executeAfterIf();
    });
}

在这个基本的重构中，executeAfterIf是在处理if块的任一情况后调用的回调函数。

当然，还有其他模式来处理这类事情;您选择哪一个取决于项目其余部分的代码。

当if / else完成时jQuery

4 个答案: