Проблема jquery с двумя переменными в зависимости друг от друга

Question

Я пытаюсь получить функцию jquery с двумя работающими переменными. Невеста к этому, поэтому, пожалуйста, будьте терпеливы :)

Переменная одна определяется с начала, ее можно изменить, нажав на определенную кнопку (.btn - effect2 или .btn - effect3). Переменная двух вставляет html в DOM, когда нажата кнопка с классом .trigger.

Ниже приведен jquery, с которым я столкнулся.

Что до сих пор работает: Насколько мне известно, console.log меняет переменную, когда нажимается .btn - effect2 (или 3).

Что не работает К сожалению, обновление, похоже, не вступает в силу для переменной внутри встроенного html (переменная два).

Интересное Q & A Я нашел Updating a global variable from a function. Я пытался изменить свой код, потому что у меня появилось ощущение, что область видимости отключена. Но я думаю, я не совсем понял, что делать, потому что это не сработало, как ожидалось.

Если у вас есть совсем другое решение, я пропустил его, пожалуйста, укажите его мне. Любая помощь очень ценится.

Большое спасибо!

var one = "effect1"; 
 

 
$('.btn--effect2').click(function(){ 
 
\t window.one = "effect2"; 
 
    console.log(one); 
 
}); 
 

 
$('.btn--effect3').click(function(){ 
 
\t window.one = "effect3"; 
 
    console.log(one); 
 
}); 
 

 
var two = "<li><div class='post post--"+one+"'><p>Some text.</p></div></li>" 
 

 
$('.trigger').click(function(){ 
 
    $('.list ul li:eq(0)').before(two); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="btn--effect1">effect1</button> 
 
<button class="btn--effect2">effect2</button> 
 
<button class="btn--effect3">effect3</button> 
 
<button class="trigger">trigger</button> 
 

 
<section class="list"> 
 
    <ul> 
 
    <li><div class="post post--effect1"><p>Some text.</p></div></li> 
 
    </ul> 
 
    <ul> 
 
    <li><div class="post post--effect1"><p>Some text.</p></div></li> 
 
    </ul> 
 
    <ul> 
 
    <li><div class="post post--effect1"><p>Some text.</p></div></li> 
 
    </ul> 
 
</section>

Answer 1

Причина: в вашем коде, two определяется при запуске и никогда не меняется!

Это не так динамично.

var one = "effect1"; 
 

 
$('.btn--effect2').click(function(){ 
 
\t window.one = "effect2"; 
 
    console.log(one); 
 
}); 
 

 
$('.btn--effect3').click(function(){ 
 
\t window.one = "effect3"; 
 
    console.log(one); 
 
}); 
 

 
$('.trigger').click(function(){ 
 
    var two = "<li><div class='post post--"+one+"'><p>Some text.</p></div></li>" 
 
    $('.list ul li:eq(0)').before(two); 
 
});

Это должно работать.