【问题标题】:I want to create multiple (i.e approx 4) On/Off toggle button我想创建多个(即大约 4 个)开/关切换按钮
【发布时间】:2019-05-31 06:02:42
【问题描述】:

我是 Flask 的新手,想在我的网站上创建多个(大约 4 个按钮)开/关切换按钮。我想知道这是否以及如何包括动态标签。

index.html

<html>
<body>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
  </head>

  <body>
    <input type="checkbox"  class='toggle' checked data-toggle="toggle">
    <div class='status'>Toggled</div>
    <input type="checkbox"  class="toggle1" checked data-toggle="toggle1">
    <div class="status1">Toggled2</div>
  </body>

  <script>
   $(document).ready(function() {
    $('.toggle').click(function() {
     var current_status = $('.status').text();
     $.ajax({
      url: "/get_toggled_status",
      type: "get",
      data: {status: current_status},
      success: function(response) {
        $(".status").html(response);
      },
      error: function(xhr) {

      }
    });
   });



  });

   $(document).ready(function() {
     $('.toggle1').click(function() {
      var current_status1 = $('.status1').text();
      $.ajax({
       url: "/get_toggled_status1",
       type: "get",
       data: {status: current_status1},
       success: function(response) {
         $(".status1").html(response);
       },
       error: function(xhr) {

       }
     });
    });
   });
 </script>


 </html>

app.py(用于路由)

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


app = Flask(__name__)

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

@app.route('/switch_led', methods=['POST'])
def move_forward():
    if request.form['demo1']=='ON':
        table.put_item(
            Item={
                'ID':'APPLIANCE1',
                'sequence':1
                }
            )
        ar="PRESS TO UPDATE"
        templateData ={
        'ar':ar
        }
    if request.form['demo1']=='OFF':
        table.put_item(
            Item={
                'ID':'APPLIANCE1',
                'sequence':0
                }
            )
        ar="CHECK DATABASE"
        templateData ={
        'ar':ar
        }
    if request.form['demo2']=='ON':
        table.put_item(
            Item={
                'ID':'APPLIANCE2',
                'sequence':1
                }
            )
        ar="PRESS TO UPDATE"
        templateData ={
        'ar':ar
        }
    if request.form['demo2']=='OFF':
        table.put_item(
            Item={
                'ID':'APPLIANCE2',
                'sequence':0
                }
            )
        ar="CHECK DATABASE"
        templateData ={
        'ar':ar
        }
    if request.form['demo3']=='ON':
        table.put_item(
            Item={
                'ID':'APPLIANCE3',
                'sequence':1
                }
            )
        ar="PRESS TO UPDATE"
        templateData ={
        'ar':ar
        }
    if request.form['demo3']=='OFF':
        table.put_item(
            Item={
                'ID':'APPLIANCE3',
                'sequence':0
                }
            )
        ar="CHECK DATABASE"
        templateData ={
        'ar':ar
        }
    if request.form['demo4']=='ON':
        table.put_item(
            Item={
                'ID':'LOCK',
                'sequence':1
                }
            )
        ar="PRESS TO UPDATE"
        templateData ={
        'ar':ar
        }
    if request.form['demo4']=='OFF':
        table.put_item(
            Item={
                'ID':'LOCK',
                'sequence':0
                }
            )
        ar="CHECK DATABASE"
        templateData ={
        'ar':ar
        }



    return render_template('index.html', **templateData);

@app.route('/get_toggled_status') 
def get_toggled_status():
  current_status = request.args.get('status')
  return 'Toggled' if current_status == 'Untoggled' else 'Untoggled'

@app.route('/get_toggled_status1') 
def get_toggled_status1():
  current_status1 = request.args.get('status1')
  return 'Toggled' if current_status1 == 'Untoggled' else 'Untoggled'

if __name__ == '__main__':
    app.run(debug='true')

我的结果是它显示了 2 个名为 toggle 和 toggle1 的切换按钮。但是单击名为切换的按钮...它在打开时将输出显示为切换,在关闭时显示为取消切换。到目前为止,一切都很好。但是当我点击名为 toggled1 的第二个按钮时,它会在第一个切换按钮而不是第二个按钮上执行操作。

【问题讨论】:

    标签: python


    【解决方案1】:

    您需要更改您的 html 代码,如下所示:

    <body>
        <input type="checkbox"  class='toggle' checked
        data-toggle="toggle" onclick="change_status('.status')">
        <div class='status'>Toggled</div>
    
        <input type="checkbox"  class="toggle1" checked
        data-toggle="toggle1" onclick="change_status('.status2')">
        <div class="status1">Toggled2</div>
      </body>
    

    js代码会是这样的:

    function change_status(status_class) {
         var current_status = $(status_class).text();
         $.ajax({
          url: "/get_toggled_status",
          type: "get",
          data: {status: current_status},
          success: function(response) {
            $(status_class).html(response);
          },
          error: function(xhr) {
    
          }
        });
       }
    

    【讨论】:

    • $(document).ready(function() { function change_status(status) { var current_status = $('.status').text(); $.ajax({ url: "/get_toggled_status ", 类型: "get", 数据: {status: current_status}, 成功: function(response) { $('.status').html(response); }, error: function(xhr) { } }); } ; }; 这是我写的..但代码不起作用..可能是我写了一些东西..希望你能告诉我..拜托。非常感谢你之前的回答。
    • 对不起,我的错。该函数应该超出 $(document).ready()。我编辑我的答案。
    • 先生,我已经添加了这个功能,但是还是不行。它显示“未定义的错误:popper 未定义”
    • 任何时候,很高兴它有帮助。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2022-11-28
    • 1970-01-01
    • 2019-05-03
    • 2021-09-18
    • 2014-06-02
    • 2010-09-23
    • 2016-04-04
    相关资源
    最近更新 更多