Javascript 追加时元素重复

首先，我试图用jQuery、Ajax和PHP创建一个基本的tcg 下面是我尝试将卡添加到空白位置并更改数据属性值的过程，但当我单击一张卡时，它会创建其他“卡”，并且该值不会更改。

我尝试用于更改数据的代码：

$(this).data('place', 'field');

---

如何解决此问题？

代码中的问题是在类中使用了

append

，因此在包含该类的每个元素中都创建了内容。您应该取而代之的是获取类的第一个元素，附加到它，然后删除该类，这样就不会再次选择它。我设置了一个提琴来演示它

因为有多个

.myslot

元素，每个元素都会得到一份副本，所以你会得到其他卡。
使用一个选择器，该选择器将为您提供一个要附加到的项。e、 g.

.myslot:empty:first

.data（）

不会更改数据属性—它使用自己的内部机制存储数据。如果确实要更改属性，可以使用

attr

---

谢谢！你帮了我很多。