时间戳

首页 > 解决方案 > 如何通过使用 jQuery 单击按钮来获得下一个问题

javascript - 如何通过使用 jQuery 单击按钮来获得下一个问题

问题描述

我想修改这个 jQuery 代码，这样当我按下“下一步”按钮时，应该会出现下一个问题，而不是通过单击单选按钮。

<!DOCTYPE html>
    <html>
    
    <head>
      <title>jQuery Get Selected Radio Button Value</title>
      <style>
        * {
          background-color: wheat;
          font-size: 40px;
          align-self: center;
        }
    
        .big {
          width: 20px;
          height: 20px;
        }
    
        #title {
          font-size: 50px;
          text-align: center;
          width: 100%;
          color: tomato
        }
    
        div {
          width: 100%;
          display: block;
          text-align: center;
        }
        #next{
          float:right;
          margin-right: 20%;
          color:tomato  
        }
      </style>
      <script src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
      <script>
        $(document).ready(function () {
          $('#game,#movie,#sport,#genre,#action,#adventure,#scifi,#gta,#fpp,#historic,#indoor,#outdoor,#esport').hide();
    
          $('#hobbie input').on('change',function () {
            var x = $('#game,#movie,#sport,#genre,#action,#game,#adventure,#scifi,#gta,#fpp,#historic,#indoor,#outdoor,#esport  ').hide();
            $('#' + $(this).val()).slideDown();
          })
          $('#movie input').change(function () {
            $('#game,#sport,#action,#adventure,#scifi,#gta,#fpp,#historic,#indoor,#outdoor,#esport').hide();
            $('#' + $(this).val()).show();
          })
    
          $('#game input').change(function () {
            $('#movie,#sport,#genre,#action,#game#adventure,#scifi,#gta,#fpp,#historic,#indoor,#outdoor,#esport').hide();
            $('#' + $(this).val()).show();
          })
    
          $('#sport input').change(function () {
            $('#game,#movie,#genre,#action,#adventure,#scifi,#gta,#fpp,#historic,#indoor,#outdoor,#esport').hide();
            $('#' + $(this).val()).show();
          })
          
          // for button position
          jQuery.fn.center = function () {
        this.css("position","absolute");
        this.css("top", ( $(window).height() - this.height() ) / 1.2+$(window).scrollTop() + "px");
        this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
        return this;
    }
    $('#next').center();
        });
    
      </script>
    </head>
    
    <body>
       <h1 id="title">Interest</h1>

  <div class="level1">
    <div id="hobbie">
      <hr>
      <hr>
      <hr>
      <input type="radio" class="big" name="hobbie" value="movie">movie</input>
      <input type="radio" class="big" name="hobbie" value="game">games</input>
      <input type="radio" class="big" name="hobbie" value="sport">sports</input>
    </div>
  </div>

  <div class="level2">
    <div id="movie">
      <hr>
      <hr>
      <hr>
      <input type="radio" class="big" name="movie" value="action">action</input>
      <input type="radio" class="big" name="movie" value="adventure">adventure</input>
      <input type="radio" class="big" name="movie" value="scifi">Sci-Fi</input>
    </div>

    <div id="game">
      <hr>
      <hr>
      <hr>
      <input type="radio" class="big" name="game" value="gta">GTA</input>
      <input type="radio" class="big" name="game" value="fpp">FPP</input>
      <input type="radio" class="big" name="game" value="historic">Historic</input>
    </div>

    <div id="sport">
      <hr>
      <hr>
      <hr>
      <input type="radio" class="big" name="sport" value="indoor">indoor</input>
      <input type="radio" class="big" name="sport" value="outdoor">outdoor</input>
      <input type="radio" class="big" name="sport" value="esport">esport</input>
    </div>
  </div>

  <div class="level3">
    <div id="action">
      <hr>
      <hr>
      <input type="radio" class="big" name="action" value="matrix">the Matrix</input>
      <input type="radio" class="big" name="action" value="terminator">Terminator</input>
      <input type="radio" class="big" name="action" value="madmax">Mad Max</input>
    </div>
    <div id="adventure">
      <hr>
      <hr>
      <input type="radio" class="big" name="adventure" value="jumanji">Jumanji</input>
      <input type="radio" class="big" name="adventure" value="rings">Lord of the Rings</input>
      <input type="radio" class="big" name="adventure" value="avatar">Avatar</input>
    </div>
    <div id="scifi">
      <hr>
      <hr>
      <input type="radio" class="big" name="scifi" value="inception">Inception</input>
      <input type="radio" class="big" name="scifi" value="prometheus">Prometheus</input>
      <input type="radio" class="big" name="scifi" value="martian">The Martian</input>
    </div>

    <div id="gta">
      <hr>
      <hr>
      <input type="radio" class="big" name="gta" value="gtav">GTA-V</input>
      <input type="radio" class="big" name="gta" value="vice">Vice City</input>
      <input type="radio" class="big" name="gta" value="san">San Andreas</input>
    </div>
    <div id="fpp">
      <hr>
      <hr>
      <input type="radio" class="big" name="fpp" value="battle">Battlefield</input>
      <input type="radio" class="big" name="fpp" value="cod">Call of Duty</input>
      <input type="radio" class="big" name="fpp" value="pubg">PUBG</input>

    </div>
    <div id="historic">
      <hr>
      <hr>
      <input type="radio" class="big" name="historic" value="witcher">The Witcher Hunter</input>
      <input type="radio" class="big" name="historic" value="assasin">Assasins Creed</input>
      <input type="radio" class="big" name="historic" value="dead">Red Dead Redemption</input>
    </div>


    <div id="indoor">
      <hr>
      <hr>
      <input type="radio" class="big" name="indoor" value="ludo">ludo</input>
      <input type="radio" class="big" name="indoor" value="carrom">carrom</input>
      <input type="radio" class="big" name="indoor" value="cards">cards</input>
    </div>
    <div id="outdoor">
      <hr>
      <hr>
      <input type="radio" class="big" name="outdoor" value="cricket">Cricket</input>
      <input type="radio" class="big" name="outdoor" value="football">Football</input>
      <input type="radio" class="big" name="outdoor" value="golf">Golf</input>
    </div>
    <div id="esport">
      <hr>
      <hr>
      <input type="radio" class="big" name="esport" value="valorant">Valorant</input>
      <input type="radio" class="big" name="esport" value="dota">Dota-2</input>
      <input type="radio" class="big" name="esport" value="cs">CS-GO</input>
    </div>
  </div>
  <button id='next'>Next</button>
    </body>
    
    </html>

标签： javascriptphpjquery

解决方案

我没有得到您要求用户执行多项操作（选择选项并单击按钮）的意思，他只需在代码中选择任何选项即可获得相应的选项。无论如何，您可以尝试下面的代码，通过单击下一步按钮来获得下一个问题。（这可能是硬编码的例子：P）

<script>
        $(document).ready(function () {
            $('#game,#movie,#sport,#genre,#action,#adventure,#scifi,#gta,#fpp,#historic,#indoor,#outdoor,#esport').hide();
            
            $('#hobbie input').on('change',function () {
                var x = $('#game,#movie,#sport,#genre,#action,#adventure,#scifi,#gta,#fpp,#historic,#indoor,#outdoor,#esport').hide();
            })
            $('#movie input').change(function () {
                $('#game,#sport,#action,#adventure,#scifi,#gta,#fpp,#historic,#indoor,#outdoor,#esport').hide();
            })
            
            $('#game input').change(function () {
                $('#movie,#sport,#genre,#action,#game#adventure,#scifi,#gta,#fpp,#historic,#indoor,#outdoor,#esport').hide();
            })
            
            $('#sport input').change(function () {
                $('#game,#movie,#genre,#action,#adventure,#scifi,#gta,#fpp,#historic,#indoor,#outdoor,#esport').hide();
            })
            
          // for button position
          jQuery.fn.center = function () {
            this.css("position","absolute");
            this.css("top", ( $(window).height() - this.height() ) / 1.2+$(window).scrollTop() + "px");
            this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
            return this;
          }
          $('#next').center();
          $("#next").on('click', function(){
            var hobbieselected = $('input[name=hobbie]:checked').val();
            var movieselected = $('input[name=movie]:checked').val();
            var gameselected = $('input[name=game]:checked').val();
            var sportselected = $('input[name=sport]:checked').val();
            
            if(hobbieselected == 'movie'){
                $('#game,#sport,#gta,#fpp,#action,#adventure,#scifi#historic,#indoor,#outdoor,#esport').hide();
                $('#movie').show();
            }
            else if(hobbieselected == 'game'){
                $('#movie,#sport,#gta,#fpp,#action,#adventure,#scifi#historic,#indoor,#outdoor,#esport').hide();
                $('#game').show();
            }
            else if(hobbieselected == 'sport'){
                $('#movie,#game,#gta,#fpp,#action,#adventure,#scifi#historic,#indoor,#outdoor,#esport').hide();
                $('#sport').show();
            }
            if(hobbieselected == 'movie' && movieselected == 'action'){
                $('#game,#sport,#adventure,#scifi,#gta,#fpp,#historic,#indoor,#outdoor,#esport').hide();
                $('#action').show();
            }
            else if(hobbieselected == 'movie' && movieselected == 'adventure'){
                $('#sport,#action,#scifi,#gta,#fpp,#historic,#indoor,#outdoor,#esport').hide();
                $('#adventure').show();
            }
            else if(hobbieselected == 'movie' && movieselected == 'scifi'){
                $('#sport,#action,#adventure,#gta,#fpp,#historic,#indoor,#outdoor,#esport').hide();
                $('#scifi').show();
            }
            if(hobbieselected == 'game' && gameselected == 'gta'){
                $('#sport,#adventure,#scifi,#action,#fpp,#historic,#indoor,#outdoor,#esport').hide();
                $('#gta').show();
            }
            else if(hobbieselected == 'game' && gameselected == 'fpp'){
                $('#movie,#sport,#genre,#action,#game#adventure,#scifi,#gta,#historic,#indoor,#outdoor,#esport').hide();
                $('#fpp').show();
            }
            else if(hobbieselected == 'game' && gameselected == 'historic'){
                $('#movie,#sport,#genre,#action,#game#adventure,#scifi,#gta,#fpp,#indoor,#outdoor,#esport').hide();
                $('#historic').show();
            }
            if(hobbieselected == 'sport' && sportselected == 'indoor'){
                $('#game,#adventure,#scifi,#gta,#fpp,#historic,#action,#outdoor,#esport').hide();
                $('#indoor').show();
            }
            else if(hobbieselected == 'sport' && sportselected == 'outdoor'){
                $('#game,#movie,#genre,#action,#adventure,#scifi,#gta,#fpp,#historic,#indoor,#esport').hide();
                $('#outdoor').show();
            }
            else if(hobbieselected == 'sport' && sportselected == 'esport'){
                $('#game,#movie,#genre,#action,#adventure,#scifi,#gta,#fpp,#historic,#indoor,#outdoor').hide();
                $('#esport').show();
            }
          });
      });
  </script>

推荐阅读