logo标签列表

Bootstrap 单选按钮在 Flask 中无法工作

javascriptpythonhtmlcssflask
3

我正在一个Flask应用程序中使用Bootstrap 4的单选按钮 单选按钮，以下是我使用的代码片段：

 <div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-outline-secondary">
      <input type="radio" onclick="javascript:toggleElements();" name="toggle" id="twitter"/> Twitter
    </label>

    <label class="btn btn-outline-secondary"    >
      <input type="radio" onclick="javascript:toggleElements();" name="toggle" id="facebook"/> Facebook
    </label>
 </div>

以及JavaScript代码

<script type="text/javascript">
        function toggleElements() {
            alert('hurray');
            if(document.getElementBId('twitter').checked) {
                document.getElementById('twitterrows').style.display = 'block';
                document.getElementById('facebookrows').style.display = 'none';
            }

            if(document.getElementById('facebook').checked) {

                document.getElementById('facebookrows').style.display = 'block';
                document.getElementById('twitterrows').style.display = 'none';
            }
        }
</script>

最初，我使用简单的HTML单选按钮尝试触发JavaScript函数toggleElements()。但是，在将普通单选按钮替换为Bootstrap单选按钮后，没有触发任何内容。

以下是完整的HTML代码

{% from 'helper/forms.html' import render_field with context %}
<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sharjah Tourism Search Results</title>

    <script src="{{ url_for('static', filename='js/jquery-3.2.1.min.js') }}"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="{{ url_for('static',filename='styles/home.css')}}"/>

    <script type="text/javascript">
            function toggleElements() {
                alert('hurray');
                if(document.getElementBId('twitter').checked) {
                    document.getElementById('twitterrows').style.display = 'block';
                    document.getElementById('facebookrows').style.display = 'none';
                }

                if(document.getElementById('facebook').checked) {

                    document.getElementById('facebookrows').style.display = 'block';
                    document.getElementById('twitterrows').style.display = 'none';
                }
            }
    </script>
</head>

<body>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="{{ url_for('home')}}"><strong>Search</strong></a>

        <button class = "navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7"
aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent-7">
                <ul class="navbar-nav mr-auto">

                 <li class="nav-item">
                     <a class="nav-link" href="{{url_for('add_url')}}">Add<span class="sr-only">(current)</span></a>
                 </li>

                 <li class="nav-item">
                     <a class="nav-link" href="{{ url_for('file_render')}}">Import</a>
                 </li>

                 <li class="nav-item dropdown">
                     <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                            Websites
                     </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="{{ url_for('list_urls') }}">List</a>
                        <a class="dropdown-item" href="{{ url_for('list_crawled_websites')}}">Selected</a>
                    </div>
                </li>
            </ul>
         </div>
     </nav>

    <!-- Header -->
    <div class="container">
         <br />
        <div class="row">
             <!-- Logo -->
            <div class="col-sm">
                <a href="#"><img class="w-50 h-60" src="{{url_for('static',filename='images/sctda_logo.jpg')}}" /></a>
            </div>

             <!-- Search Bar -->
            <div class="col-sm-5 searchbar">
                <form action="{{url_for('fetch_results')}}" method="POST">
                    <div class="input-group">
                        <input type="search" placeholder="Search" class="form-control" name="search" id="search" value="{{data['search_term']}}" class="w-75 h-75" required>
                        <div class="input-group-append">
              <button type="submit" class="btn btn-outline-secondary btn-sm"><i class="fa fa-search"></i></button>
            </div>
                    </div>
                </form>
            </div>

        </div>


        <div id="container">
            <div class="row">
            {%set data = data['results'] %}
             <div class="col-md-4">
                 <div class="btn-group-toggle" data-toggle="buttons">
                     <label class="btn btn-outline-secondary active">
                         <input type="radio" checked autocomplete="off"> Internal
                     </label>
                 </div>
                 <hr>

                 {% set internals = data['internal'] %}
                 {% if internals is defined and internals|length %}
                 {% for internal in internals %}
                 <div class="card">
                <div class="card-body">
                    <h5 class="card-title">{{ internal['title'] }}</h5>
                    <p class="card-text">{{ internal['description'] }}</p>
                    <a href="{{ internal['url'] }}" class="card-link">{{ internal['title'] }}</a>
                </div>
            </div>
            <br/>
                 {% endfor %}
                 {% else %}
                 <div class="card">
                <div class="card-body">
                    <h5 class="card-title">No Records Found</h5>
                </div>
            </div>
            <br/>
                 {% endif %}
             </div>

             <div class="col-md-4">
                {% set externals = data['external'] %}
                {% if externals is defined and externals|length %}
                <div class="btn-group-toggle" data-toggle="buttons">
                    <label class="btn btn-outline-secondary active">
                        <input type="radio" checked autocomplete="off"> External
                    </label>
                </div>
                <hr>
                {% for external in externals %}
                <div class="card">
                 <div class="card-body">
                     <h5 class="card-title">{{ external['title'] }}</h5>
                     <p class="card-text">{{ external['description'] }}</p>
                     <a href="{{ external['url'] }}" class="card-link">{{ external['title'] }}</a>
                 </div>
             </div>
             <br/>
             {% endfor %}
             {% else %}
             <div class="card">
                <div class="card-body">
                    <h5 class="card-title">No Records Found</h5>
                </div>
            </div>
            <br/>
             {% endif %}
            </div>

             <div class="col-md-4">
                 <div class="btn-group btn-group-toggle" data-toggle="buttons">
                     <label class="btn btn-outline-secondary">
                         <input type="radio" onclick="javascript:toggleElements();" name="toggle" id="twitter"/> Twitter
                     </label>

                     <label class="btn btn-outline-secondary"   >
                         <input type="radio" onclick="javascript:toggleElements();" name="toggle" id="facebook"/> Facebook
                     </label>
                    </div>
                    <hr>
                    (<input type="radio" onclick="javascript:toggleElements();" name="toggle" id="twitter"/> Twitter,
                    <input type="radio" onclick="javascript:toggleElements();" name="toggle" id="facebook"/> Facebook)
                 <div id="twitterrows">
                     {% set tweets = data['twitter'] %}
                     {% if tweets is defined and tweets|length %}
                     {% for tweet in tweets %}
                     <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">{{ tweet['title'] }}</h5>
                            <p class="card-text">{{ tweet['description'] }}</p>
                            <a href="{{ tweet['url'] }}" class="card-link">{{ tweet['title'] }}</a>
                        </div>
                    </div>
                    <br/>
                    {% endfor %}
                    {% else %}
                    <div class="card">
                     <div class="card-body">
                         <h5 class="card-title">No Records Found</h5>
                     </div>
                 </div>
                 <br/>
                    {% endif %}
                 </div>

                 <div id="facebookrows">
                     {% set posts = data['facebook'] %}
                     {% if posts is defined and posts|length %}
                     {% for post in posts %}
                     <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">{{ post['title'] }}</h5>
                            <p class="card-text">{{ post['description'] }}</p>
                            <a href="{{ post['url'] }}" class="card-link">{{ post['title'] }}</a>
                        </div>
                    </div>
                    <br/>
                    {% endfor %}
                    {% else %}
                    <div class="card">
                     <div class="card-body">
                         <h5 class="card-title">No Records Found</h5>
                     </div>
                 </div>
                 <br/>
                    {% endif %}
                 </div>
             </div>
        </div>
    </div>
    <center>Developed by School of Information Technology Team,Skyline University College</center>
</body>
</html>

我强烈怀疑脚本的调用顺序出现了问题，应该在head标签下进行调用。请有经验的人帮我修复这个问题。
您可以在网页浏览器中打开JavaScript控制台，以查看JavaScript代码是否存在错误信息。 - furas
当我选择普通单选按钮时，它可以正常工作。我的意思是JavaScript函数被触发了。 - James K J
2个回答
1
我假设你正在尝试根据所选值（无论是Facebook还是Twitter）执行某些操作。请尝试以下步骤：
  1. 首先为两个输入（单选）按钮分别赋值。
  2. 使用name属性向该单选按钮添加onchange函数。
  3. 在onchange函数内，您可以获取所选选项的值，然后使用if else语句进行下一步操作。
 - HarshaHR
参考链接：https://dev59.com/CGYs5IYBdhLWcg3wFP94 - HarshaHR
0

我通过将上述HTML页面中的三个脚本标签替换为下面的标签来解决了这个问题

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接