html 单击时按钮显示不同的文本flak-python

w8rqjzmb  于 2022-12-21  发布在  Python
关注(0)|答案(1)|浏览(215)

我正在尝试编写四个按钮,每个按钮在单击时显示不同的文本(单击按钮一显示“消息一”,单击按钮二将“消息一”替换为“消息二”,等等...)。
我没有经验与flak-python,所以我不知道如何去解决这个问题。
我第一次尝试在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>

使用此JS:

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

然而,JavaScript没有加载&因此按钮不起作用。现在我试着用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 %}

到目前为止的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")

我怎样才能让按钮工作呢?我是一定要使用表单还是可以使用原始的按钮标签呢?如果我确实需要表单,那么在python代码中需要什么来让每个按钮点击显示下面不同的文本呢?提前谢谢你。

yptwkmov

yptwkmov1#

如果你只是想改变元素的可见性,你不需要表单,用Javascript实现很容易,不用Flask。
在运行代码之前等待页面加载。注册单击事件的侦听器并切换可见性。

<!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>

相关问题