javascript - jQuery 中奇怪的变量作用域

Question

我知道 javascript 中的范围有时很困难，但这次我怀疑问题可能出在 jQuery 执行顺序上。在下面的代码中，我尝试在 javascript 中定义一个简单的 HTML 元素(模拟一个按钮)，并在使用 jQuery 将其安装在 HTML 中时将不同的文本传递给它:

var name;
var buttonsecondary = '<div class="buttonsecondary clicked"><p>'+name+'</p></div>';

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content-item" id="things4">
  <a href="aFabrica.html">
    <div class="itemHome">
      <div class="bg" id="buttonsecondaryfabrica"></div>
      <script>
        $(document).ready(function() {
          var name = "A Fábrica";
          $("#buttonsecondaryfabrica").after(buttonsecondary)
        })
      </script>
    </div>
  </a>
</div>
<div class="content-item">
  <a href="lojas.html">

    <div class="itemHome">
      <div class="bg" id="buttonsecondaryloja"></div>
      <script>
        $(document).ready(function() {
          var name = "Loja";
          $("#buttonsecondaryloja").after(buttonsecondary)
        })
      </script>
    </div>
  </a>
</div>

问题是我在两个按钮上得到相同的文本:“Store”，尽管在第一个警报中得到“Street”，在第二个警报中得到“Store”...有谁知道怎么解释吗？

Answer 1

问题是 buttonsecondary 变量已经包含了按钮的最终 HTML，因为它只是一个连接的字符串。

您每次都需要生成所需的 HTML:

function generateButton(name)
{
    return '<div class="buttonsecondary clicked"><p>' + name + '</p></div>';
}

然后:

var name = "A Fábrica";
$("#buttonsecondaryfabrica").after(generateButton(name));

和

var name = "Loja";
$("#buttonsecondaryloja").after(generateButton(name));