这个弹出功能可以应用到很多用户吗？

Question

我制作了一个弹出功能，它显示了用户的phone号码。我能够将此功能应用于一个实例。 单个用户.

通常，每个用户都有一个唯一的 phone 号码。 每个用户的号码已经嵌入，只是为了显示号码，对于多个用户。

但后来，我想，如果我有 很多用户 来访问站点 怎么办？如何动态应用相同的弹出功能，而无需一遍又一遍地编写我为单个用户编写的相同代码行？

请帮帮我。

这是我写的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

Answer 1

您需要扩展应用于每张卡片的逻辑。例如，最简单的方法是使用 querySelectorAll 而不是您当前拥有的 querySelector。

这非常相似，因为它将 return 为您提供一个匹配元素的列表，然后您可以遍历该列表并以与您现在所做的大致相同的方式将事件侦听器添加到其中。

然而，为了使事情变得更简单，您最好先循环每个包含 .card 的元素。这样您就可以将第二个 querySelector 范围限定到包含元素，并使您的其余逻辑基本保持不变。

不过，您可以通过使用 classList.toggle 而不是手动检查 class 然后根据需要手动检查 adding/removing 来简化点击处理程序本身。

const cards = document.querySelectorAll('.card');
cards.forEach((card) => {
  // rest of your click handler logic
})

这是一个将所有这些结合在一起的片段。我已经把它放在 codepen 上了，因为这里的编辑器不太适合这么大量的 html: https://codepen.io/29b6/pen/VwQQqrw?editors=1111

这个弹出功能可以应用到很多用户吗？

Can this popup feature be applied for many users?

html

javascript

css