Question

我正在努力制作甲板建造者。我希望有这个功能，如果我点击它在甲板部分显示的卡片，计数器就会上升。当我点击卡片中的卡片时，计数器会下降，当零卡片从卡片部分消失时。

我的问题是如何将克隆元素与原始元素区分开，以及如何将事件添加到我正在克隆的元素中。

这是我的JS脚本：

$(".bronze").mouseup(function(e){
    if (e.which === 1) {
        var counter = parseInt($(this).find(".bronze_counter").text(), 10)
        var card_name = $(this).attr("class").replace("bronze ", "")
        if (counter < 3) {
            counter += 1
            $(this).find(".bronze_counter").text(counter);
            if (counter == 1){
                $(this).clone().appendTo(".deck");
            }
            else {
                $(".deck ." + card_name).find(".bronze_counter").text(counter);
            }

        }
    }
});

我的模板：

<h3>Current Deck</h3>
<div class="container deck">

</div>

<div class="container">
    {% for card in cards %}
    <span class="bronze {{ card.name | cut:'\'' | cut:' '}}">
        <span><img src="{{ card.thumbnail_link }}" style="width:5%"> [</span>
        <span class="bronze_counter">0</span>
        <span>/3] </span>
    </span>
    {% endfor %}
</div>

此外，我需要以某种方式在数据库中保存此套牌。我正在考虑获取卡名和每张卡的计数器并将其保存在数据库中。我在自己身下挖洞了吗？

Answer 1

对克隆的元素使用data-属性。例如：

<span data-cloned="true">

然后使用或检查该数据：

$('span').data('cloned');

Answer 2

好吧，你可以像这样在文档中添加一个事件监听器：

class cat(object):
    def meow(self):
        self.sound = "meow"
        return self.sound

class dog(object):
    def woof(self):
        return self.meow()


class pets(cat,dog):
    def meow(self):
        self.sound = "meow meow"
        return self.sound

print(pets().woof())

因此，当你点击.bronze元素时，它基本上都会进行回调，所以你不需要为克隆元素添加事件。

如果您需要将它们保存在数据库中，只需将它们放在一个表单中，并为每张卡所需的每个值添加隐藏的输入。

如何区分jQuery中的克隆元素并将事件添加到克隆元素

2 个答案: