我做了一個彈出功能，顯示用戶的電話號碼。我能夠將此功能應用于一個實體。單個用戶。
通常，每個用戶都有一個唯一的電話號碼。每個用戶的號碼已經嵌入，只是為了顯示號碼，供多個用戶使用。
但是后來，我想，如果我有很多用戶來訪問該站點怎么辦？如何動態地應用相同的彈出功能，而無需一遍又一遍地為單個用戶撰寫相同的代碼行？
請幫幫我。
這是我寫的 JavaScript...
let tansform_scale_0 = document.querySelector('.transform_scale_0');
let num_btn = document.querySelector('.num_btn');
num_btn.addEventListener('click', ()=>{
if (!tansform_scale_0.classList.contains('scale_to_1')) {
tansform_scale_0.classList.add('scale_to_1');
} else {
tansform_scale_0.classList.remove('scale_to_1');
}
})
請在此處查看代碼：https ://codepen.io/matthewdon/pen/MWQEvJM
uj5u.com熱心網友回復：
您需要擴展已應用于每張卡片的邏輯。例如，最簡單的方法是使用querySelectorAll而不是querySelector您當前擁有的。
這非常相似，因為它將回傳一個匹配元素的串列，然后您可以回圈并添加您的事件偵聽器，就像您現在正在做的那樣。
然而，為了讓事情更容易一些，你最好先回圈遍歷每個包含的.card元素。這樣，您可以將第二個范圍限定querySelector為包含元素，并使其余邏輯基本保持不變。
classList.toggle不過，您可以通過使用而不是手動檢查類，然后根據需要添加/洗掉它來縮短單擊處理程式本身。
const cards = document.querySelectorAll('.card');
cards.forEach((card) => {
// rest of your click handler logic
})
這是一個將所有這些結合在一起的片段。我把它放在codepen上，因為這里的編輯器不太適合這么多的html：https ://codepen.io/29b6/pen/VwQQqrw?editors=1111
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/483162.html
標籤：javascript html css
上一篇：Flex不考慮邊距