在单击pugjs时调用函数

Question

我想在点击img时反转到img，因为这是我的javascript代码

<div class="cards" id="cards" data-status="off">
    <img class="" src="assets/img/plus.png" alt="">
</div>
<script>
    var cards= document.getElementById("cards");
    cards.addEventListener("click", function(e) {
        var toggleStatus = cards.dataset.status;
        switch (toggleStatus) {
            case "on":
                 cards.dataset.status = "off";
                 // change plus img to minus img
                 break;
            case "off":
                 cards.dataset.status = "on";
                 // change minus img to plus img
                 break;
         }
     }, false);
</script>

但我想让它成为pugjs代码。我是个新手。这是我的pugjs代码，但它是错误的。

.cards#cards(data-status="off" onclick="viewAll()")
- var dataStatus = true;
    script.
        function viewAll() {
           if (dataStatus) {
                dataStatus = false;
           } else {
                dataStatus = true;
           }
        }
    if dataStatus
        img(src="assets/images/plus.png" alt="")
    else
        img(src="assets/images/minus.png" alt="")

有人能帮帮我吗？

Answer 1

这个条件不能单独使用PugJs来完成，一般的渲染过程非常简单！

它只是将源代码编译成一个Js函数，该函数将返回呈现的HTML字符串和您的数据。

您可以做到这一点，但您需要动态呈现该内容，您可以使用Node.js并创建一个可重用的函数，并对不同的数据集进行调用。