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>

問題是我在兩個按鈕上都得到了相同的文本：“商店”雖然在第一個警報中得到“街道”，在第二個“商店”中......有誰知道如何解釋它？

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