问我想要创建多个(即大约4)开关按钮
EN

Stack Overflow用户

提问于 2019-05-30 16:19:19

回答 1查看 523关注 0票数 1

我是新的瓶，并希望创建多个(约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个切换按钮名为切换和toggle1。但是，单击名为toggle...it的按钮时，输出将显示为打开时的切换和关闭时的取消切换。到目前为止，一切都很好。但是当我点击名为toggled1的第二个按钮时，它在第一个按钮上执行操作，而不是在第二个按钮上执行操作。

python

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-05-30 18:14:33

您需要修改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) {

      }
    });
   }

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56381975

复制

相似问题

问我想要创建多个(即大约4)开关按钮
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我想要创建多个(即大约4)开关按钮EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我想要创建多个(即大约4)开关按钮
EN