按钮在单击时显示不同的文本 flask-python

Question

I am trying to code four buttons that each display different text on click (clicking button one shows "message one", clicking button two replaces "message one" with "message two", & so on...).我正在尝试编写四个按钮，每个按钮在单击时显示不同的文本（单击按钮一显示“消息一”，单击按钮二将“消息一”替换为“消息二”，等等......）。

I am not experienced with flask-python so I do not know how to go about fixing this issue.我没有使用 flask-python 的经验，所以我不知道如何解决这个问题。

I first tried to use this for HTML:我首先尝试将其用于 HTML：

    <button class="btnClick"  data-section="1">ONE</button>
    <button class="btnClick"  data-section="2">TWO</button>
    <button class="btnClick"  data-section="3">THEE</button>
    <button class="btnClick"  data-section="4">FIVE</button>

    <div class="container-section">
        <div data-target="1">
            <p>Message one</p>
        </div>

        <div data-target="2" style="display:none;">
            <p>Message two</p>
        </div>

        <div data-target="3" style="display:none;">
            <p>Message three</p>
        </div>

        <div data-target="4" style="display:none;">
            <p>Message four</p>
        </div>

    </div>

With this JS:有了这个 JS：

const sections = $('.container-section');
$('.btnClick').on('click', function () {
    $(sections).find('[data-target]').hide();
    $(sections).find('[data-target="' + $(this).data('section') + '"]').show();
});

However, the the javascript was not loading & therefore the buttons were not working.但是，javascript 未加载，因此按钮无法正常工作。 Now I am trying to implement this using a form in the HTML instead:现在我正在尝试使用 HTML 中的表单来实现它：

<form>
        <input type="submit" name="1" value="One">
        <input type="submit" name="2" value="Two">
        <input type="submit" name="3" value="Three">
        <input type="submit" name="4" value="Four">
    </form>

    {% if text %}
    <p id="text">{{ text }}</p>
    {% endif %}

with this python code so far:到目前为止，使用此 python 代码：

from flask import Flask, render_template, request, redirect, url_for

app = Flask(__name__)

@app.route('/')
def hello_world():
    return render_template('index.html')

@app.route('/index.html')
def index():
    return render_template('index.html')

@app.route('/arena.html')
def arena():

    try:
        value=request.form['submit']
        if value == '1':
            return render_template('arena.html', text="1")


    except:
        try:

            return render_template('arena.html', text=request.form['text'])
        except:

            return render_template('arena.html', text="default")

How might I get the buttons to work?我怎样才能让按钮工作？ Do I absolutely need to use a form or is it possible with the original button tag?我是否绝对需要使用表单，或者是否可以使用原始按钮标签？ If I do need a form, what needs to go in the python code to have each button click display different text below?如果我确实需要一个表单，python 代码中需要做什么才能让每个按钮单击显示下面的不同文本？ Thank you in advance.先感谢您。

Answer 1

If you just want to change the visibility of elements, you don't need a form.如果您只想更改元素的可见性，则不需要表单。 It's easy to implement with Javascript and without Flask.使用 Javascript 无需 Flask 即可轻松实现。

Wait for the page to load before running the code.在运行代码之前等待页面加载。 Register your listeners for click events and toggle visibility.注册您的监听器以获取点击事件并切换可见性。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Index</title>
</head>
<body>
    <button data-target="#msg-1">One</button>
    <button data-target="#msg-2">Two</button>
    <button data-target="#msg-3">Three</button>
    <button data-target="#msg-4">Four</button>

    <div id="msg-1" style="display: None;">Message 1</div>
    <div id="msg-2" style="display: None;">Message 2</div>
    <div id="msg-3" style="display: None;">Message 3</div>
    <div id="msg-4" style="display: None;">Message 4</div>

    <script 
        src="https://code.jquery.com/jquery-3.6.2.js" 
        integrity="sha256-pkn2CUZmheSeyssYw3vMp1+xyub4m+e+QK4sQskvuo4=" 
        crossorigin="anonymous"></script>
    <script>
        $(function() {
            $('button[data-target]').click(function() {
                $('[id^="msg-"]').hide();
                $($(this).data('target')).show();
            });
        });
    </script>
</body>
</html>

按钮在单击时显示不同的文本 flask-python

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-12-16 23:55:27

按钮在单击时显示不同的文本 flask-python

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-12-16 23:55:27

解决方案1
1 已采纳 2022-12-16 23:55:27