使用for循環時如何從Django模板將參數傳遞給javascript

Question

我正在使用 django 創建一個測驗應用程序。 我在從 django 模板向我的 javascript function 發送參數時遇到問題。

Html 代碼。

{% for qts in page %}

<input type="button" id ="btn-1" name="grp" value="{{qts.opt1}}" class="btn btn-outline-primary mt-3" onclick = "check(this,{{qts.answer}})">

Javascript 代碼

function check(btn,answer) {
   var user_ans_id = btn.id;
   var user_ans = document.getElementById(user_ans_id).value;
   console.log(answer);
}

有沒有其他解決辦法。

提前致謝！

Answer 1

實現所需 output 的更簡單和更清潔的方法可以使用 jquery 實現如下

    {% for qts in page %}
    <input type="button" value="{{qts.opt1}}" class="quest-btn" data-answer="{{qts.answer}}" />
    {% endfor %}
    <script>
        $(".quest-btn").click((e) => {
            const targetElement = e.target;
            console.log(
                targetElement.dataset.answer,
                targetElement.value
            );
        });
    </script>

在 about code quest-class 中只是一個虛擬 class 將點擊事件偵聽器附加到多個按鈕，您可以在按鈕中使用任何常見的 class。

要了解有關 jquery 單擊事件偵聽器的更多信息，請查看此

有關數據屬性的更多信息，請查看此