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

Question

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

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

下面是我想出的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);
});

这应该有效。

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

jquery issue with two variables depending on each other

variables

jquery