странная переменная scope в jQuery

Question

Я знаю, что область видимости в javascript иногда жесткая, но на этот раз я подозреваю, что проблема может быть исполнением jQuery. В следующем коде я пытаюсь определить простой HTML-элемент (имитирует кнопки) в JavaScript и передать другой текст к нему при установке его в HTML с помощью JQuery:

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», хотя в первом предупреждении появляется «Улица» и во втором «Магазине» ... Кто-нибудь знает, как это объяснить?

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