javascript中如何通過引用數組來設置內容

Question

我想為每個按鈕設置內容。

我有數組，想設置A ， B ， C ， D 。

但是現在，在我下面的工作中，結果有點不同。

有沒有辦法實現它？

謝謝

 arr=["A","B","C","D"] $(".button").text(arr);

 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <div> <button class="button"></button> <button class="button"></button> <button class="button"></button> <button class="button"></button> </div>

Answer 1

由於.button將給出具有相同 class 的所有元素，因此您需要對其進行迭代。 使用每個來迭代 object。 each將第一個參數作為元素，將第二個參數作為index 。 使用此index從數組中檢索值。 然后使用文本來設置按鈕的內容

 let arr = ["A", "B", "C", "D"] $(".button").each(function(i, v) { $(v).text(arr[i]) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <button class="button"></button> <button class="button"></button> <button class="button"></button> <button class="button"></button> </div>

Answer 2

即使 brk 的答案完全有效，我也會親自為數組中的每個元素創建一個唯一的按鈕。 這樣，如果您的 html 中沒有足夠的按鈕用於每個元素，您就不會遇到問題，反之亦然。

 arr = ["A", "B", "C", "D"] arr.forEach(element => createButton(element)); function createButton(text) { var newButton = document.createElement("button"); newButton.setAttribute('class', 'button'); newButton.innerHTML = text; document.body.appendChild(newButton); }