两个变量相互依赖的jquery问题

Question

我正在尝试使用两个变量工作的 jquery 函数。 相当新，所以请耐心等待:)

变量一是从一开始就定义的，可以通过单击特定按钮（.btn--effect2 或 .btn--effect3）来更改。 变量 2 将 html 插入 DOM，当单击具有类 .trigger 的按钮时。

下面是我想出的jquery。

到目前为止的工作： 据 console.log 告诉我，当点击 .btn--effect2（或 3）时，变量 1 会更新。

什么不工作 不幸的是，更新似乎没有对插入的 html 中的变量一（变量二）生效。

我发现了一个有趣的问答Updating a global variable from a function。我尝试修改我的代码，因为我感觉范围有些问题。但我想，我不太明白该怎么做，因为它没有按预期工作。

如果我错过了任何完全不同的解决方案，请指出给我。 非常感谢任何帮助。

非常感谢！

var one = "effect1";

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

$('.btn--effect3').click(function(){
	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(){
	window.one = "effect2";
    console.log(one);
});

$('.btn--effect3').click(function(){
	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);
});

这应该可行。