Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

问题是我在两个按钮上都得到相同的文字：＆＃34; Store＆＃34;虽然在第一次提醒＆＃34; Street＆＃34;在第二个＆＃34;商店＆＃34; ... 有谁知道如何解释它？

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));

Answer 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'));

jQuery

2 个答案: