django 单击后改变按钮颜色

我有一个有四个答案的问题，我希望按钮在选择正确答案时 Flink 绿色，在选择错误答案时 Flink 红色。我该怎么做？

我想用django而不是javascript来解决这个问题。

html
{% for q in questions %}
                {% if q.kategorie == category and q.flaag == True %}
                        {% if questions.has_next %}
                            <br/>
                            <div class="flex-container">
                                <div class="container1">
                                     <div class="position_startButton"><button  type="submit" name="next"  value="{{q.question}}" class="nächstefrage_btn">Nächste Frage!</button></div>
                                    <div class="game_options_top">
                                        <div class="option">
                                            <p><button class="option_btn"  name="next"  value="{{erste_frage}}" formaction="{% url 'quiz' %}?page={{ questions.next_page_number  }} "  type="submit">A: <span id="option_span">{{erste_frage}}</span></button></p>
                                        </div>
                                        <div class="option">
                                            <p><button class="option_btn"  name="next"  [ngClass] = value="{{zweite_frage}}" formaction="{% url 'quiz' %}?page={{ questions.next_page_number  }} "  type="submit">B: <span id="option_span">{{zweite_frage}}</span></button></p>
                                        </div>
                                    </div>
                                    <div class="game_question">
                                        <h1 class="display_question">{{q.question}}</h1>
                                    </div>
                                    <div class="game_options_bottom">
                                        <div class="option">
                                            <p><button class="option_btn"  name="next"  value="{{dritte_frage}}" formaction="{% url 'quiz' %}?page={{ questions.next_page_number  }} "  type="submit">C: <span id="option_span">{{dritte_frage}}</span></button></p>
                                        </div>
                                        <div class="option">
                                            <p><button class="option_btn"  name="next"  value="{{vierte_frage}}" formaction="{% url 'quiz' %}?page={{ questions.next_page_number  }} "  type="submit">D: <span id="option_span">{{vierte_frage}}</span></button></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="menü">
                                        <button class="menü_button" formaction="{% url 'Example_dashboard' %}" ><i class="fa fa-bars" aria-hidden="true"></i><b> Menü</b></button>
                                        <div class="items">
                                            <a href="{% url 'Example_dashboard' %}"> <i class="fa-solid fa-house"></i> Startseite </a>
                                            <a href="{% url 'Example_fragenkatalog' %}"> <i class="fa-solid fa-pen"></i> Fragenkatalog </a>
                                            <a href="{% url 'statistics' %}"> <i class="fa-solid fa-trophy"></i> Statistik </a>
                                            <a href="{% url 'settings' %}"> <i class="fa-solid fa-gear"></i> Einstellungen </a>
                                            <a href="{% url 'logoutUser' %}"> <i class=></i> Log-Out </a>
                                        </div>
                                </div>
                            </div>
                            <div class="buttons">
                                <div class="position_begründung_button">
                                    <button class="begründung_button">Begründung</button>
                                </div>
                                <div class="position_fragemelden_button">
                                    <button class="fragemelden_button">Frage melden</button>
                                </div>
                                <div class="position_quizbeenden_button">
                                    <button class="quizbeenden_button" formaction="{% url 'Example_dashboard' %}">Quiz beenden</button>
                                </div>
                            </div>
                            <div id="footer">
                                <a class="information" href="https://www.google.at/?hl=de.">Impressum |</a>
                                <a class="information" href="https://www.google.at/?hl=de.">Datenschutz |</a>
                                <a class="information" href="https://www.google.at/?hl=de.">Support</a>
                            </div>
                        {% elif questions.has_previous  %}

据我所知，任何Django解决方案都需要重定向或页面重载。我想你不会想要这样的东西。否则你可以通过发送一个新的 * 上下文 * 到你的模板来处理它。
无论如何，如果你不想使用JS，你可以用this CSS trick来做，我不知道浏览器的支持状态。
超文本：

<div id="nothing"></div>
<div id="one"></div>
<div class="styleSelector">
    <a href='#nothing'>Nothing</a>
    <a href='#one'>style 1</a>
</div>
<main class="scene">
    <div class="carre">
    </div>
</main>

CSS：

.scene .carre{
  width:200px;
  height:200px;
  background-color:red;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
}
#one:target ~ .scene .carre {
    width:700px;
    background-color:blue;
}

django 单击后改变按钮颜色

1条答案

相关问题

热门标签

最新问答