jQuery中奇怪的变量范围答案

【问题标题】：strange variable scope in jQueryjQuery中奇怪的变量范围
【发布时间】：2015-07-28 13:48:45
【问题描述】：

我知道 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>

问题是我在两个按钮上得到相同的文本：“商店”虽然在第一个警报中获得“街道”，而在第二个“商店”中...... 有人知道怎么解释吗？

【问题讨论】：

您可能需要使用匿名函数将按钮添加到 DOM。
@atmd：或者更好的是，这里有一个堆栈片段。
因为你在改变name和buttonsecondary保持不变
尝试只使用一个 $(document).ready(
@梦想家约瑟夫谢谢！我正在努力格式化它并放弃了......

标签： javascript jquery scope

【解决方案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));

【讨论】：

【解决方案2】：

在您的原始代码中，您正在创建一个带有稍后更改的变量的字符串。当您更改变量时，字符串不会更新，因为变量未绑定。如果要为 name 传递新值，则需要创建一个新字符串。

改变这个：

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

到这里：

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

或者，因为您使用的是 jQuery：

function createSecondaryButton(name) {
    return $('<div>').addClass('buttonsecondary clicked')
        .append($('<p>').text(name));
}

然后简单地调用函数：

$("#buttonsecondaryfabrica").after(createSecondaryButton('A Fábrica'));
$("#buttonsecondaryloja").after(createSecondaryButton('Loja'));

【讨论】：