jQuery, если if/else выполнены

Question

Если у вас возникла проблема с использованием jQuery, и я не знаю, как это исправить. Просто сказал Ive получил следующее:

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"); 

Если условие совпадает с «если», все работает отлично, наложение наполняется содержанием и будет вставляться в тело.

В то время как условие соответствует «else if», я получаю сообщение об ошибке, что наложение не определено.

Итак, я поместил some console.log(), чтобы увидеть, что делает мой код. Оба действия console.log запускаются, но в моей консоли браузера я сначала вижу «второй журнал», а затем «первый-журнал».

Мой код пытается добавить до завершения 'if/else if', даже если условие соответствует.

Я попытался найти ответ, но я ничего не смог найти, поэтому я надеюсь, что кто-то здесь поможет мне. Благодаря!

jsfiddle of my code

Answer 1

Вы должны инициализировать УАК накладку в начале программы.

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 внутри если заявления - Кроме того, убедитесь, что вы добавить текст или стиль к DIV и диапазон в противном случае они, вероятно, выиграл» t быть видимым, пока вы не посмотрите на источник.

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 выполняется асинхронно - функция внутри, что если блок не выполняет встроенный, когда вы ожидаете, но позже, когда вызов 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.

Есть, конечно, другие шаблоны для обработки такого рода вещей; который вы выбираете, зависит от кода в остальной части вашего проекта.