我怎样才能通过使用 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();
})
交互式爱情1回答
-
小唯快跑啊
我不明白你要求用户进行多项操作（选择选项并单击按钮），他只需在代码中选择任何选项即可获得相应的选项。无论如何，您可以尝试下面的代码，通过单击下一步按钮获得下一个问题。（这可能是硬编码的例子：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>
随时随地看视频慕课网APP
相关分类
JavaScript