Question

我有以下使用Semantic UI制作的按钮：

<div class="ui animated fade button" onclick="showDiv()">
   <div class="visible content">{{ four }}</div>
   <div class="hidden content">Donate !</div>
</div>
<div class="ui animated fade button" onclick="showDiv()">
   <div class="visible content">{{ eight }}</div>
   <div class="hidden content">Donate !</div>
</div>

正在初始化这些变量：

{% with four="4 Euro" eight="8 Euro" %}{% endwith %}

我还有一个div，只要按下按钮，就会出现function showDiv() { document.getElementById('welcomeDiv').style.display = "block"; }，使用JS中的以下功能：

<div id="welcomeDiv" style="display:none;text-align: center;" class="answer_list" > You have just selected an amount of: {{ value depending on which button I pressed }} </div>

看起来像这样：

{{value depending on which button I pressed}}

我的问题：如何解析{{1}}按下按钮的值？因此，当我按下第一个按钮显示此消息时：

您刚刚选择了以下数量： 4欧元

Answer 1

<div class="ui animated fade button" onclick="showDiv('{{ four }}')">
   <div class="visible content">{{ four }}</div>
   <div class="hidden content">Donate !</div>
</div>
<div class="ui animated fade button" onclick="showDiv('{{ eight }}')">
   <div class="visible content">{{ eight }}</div>
   <div class="hidden content">Donate !</div>
</div>

和横幅：

<div id="welcomeDiv" style="..."></div>

和JS：

function showDiv(str) {
    var div = document.getElementById('welcomeDiv');
    div.innerHTML = "You have just selected an amount of:" + str;
    div.style.display = "block";
}

尽管如果使用jQuery，可能有更好的方法。您应该尽量避免对元素进行内联style=""。您还可以将“4欧元”，“8欧元”移动到视图中的列表中，然后使用循环简单地渲染按钮。

我会做类似以下的事情（使用jQuery）：

donation_values = [(4, "4 Euro"), (8, "8 Euro")]

...

{% for val, str in donation_values %}
    <div class="... button" data-value="{{ val }}>
        {{ str }}
    <div>
{% endfor %}

...

$(".btn").click(function(){
    $(".banner").text($(this).text());
});

在Django中按下按钮时，如何将值解析为特定的div

1 个答案: