Javascript 单击按钮上的JQuery切换类
我需要我的按钮在单击时在当前事件和未来事件之间切换。当前，按钮上的文本会更改，但页面上的实际事件不会切换 页面加载时，将显示当前事件和“当前事件”按钮。当我点击“当前事件”按钮时，按钮文本切换到“未来事件”。每种比赛类型下的实际项目都应该切换到未来的项目，但它们不会切换。谁能告诉我我做错了什么吗 谢谢Javascript 单击按钮上的JQuery切换类,javascript,jquery,Javascript,Jquery,我需要我的按钮在单击时在当前事件和未来事件之间切换。当前，按钮上的文本会更改，但页面上的实际事件不会切换 页面加载时，将显示当前事件和“当前事件”按钮。当我点击“当前事件”按钮时，按钮文本切换到“未来事件”。每种比赛类型下的实际项目都应该切换到未来的项目，但它们不会切换。谁能告诉我我做错了什么吗 谢谢 <!DOCTYPE html> <html lang="en"> <head> <title>FV Runners</title> &
<!DOCTYPE html>
<html lang="en">
<head>
<title>FV Runners</title>
<meta charset="UTF-8">
<link href="styles/normalize.css" rel="stylesheet" />
<link href="styles/my_style.css" rel="stylesheet" />
<style>
.panel {
color: orange;
}
#a:hover {
color: gray;
}
.hide{
display:none;
}
.future{
display:none;
}
.button {
float:right;
margin-right:110px;
}
</style>
</head>
<body>
<div id="header">
<h1>Fox Valley Runners Club</h1>
</div>
<div id="main"></div>
<button class="button">Current Events</button>
<div id="pics">
<div class="race_box">
<img src="images/run1.jpg" id="5kpic" /><br />
<figcaption>5k/10k Events</figcaption>
<div class="current" id="5k">
<h3>5k/10 Events</h3>
<ul>
<li class="accordion" id="a">Mini Sprint</li>
<div class="panel">
<p>10/30/18, Memorial Park, Appleton</p>
</div>
<br>
<li class="accordion" id="a">Iron Horse</li>
<div class="panel">
<p>11/6/18, Bay Beach Park, Green Bay</p>
</div>
<br>
<li class="accordion" id="a">Twilight Trail</li>
<div class="panel">
<p>11/13/18, River's Edge Park, Wrightstown</p>
</div>
</ul>
</div>
<div class="future" id="5K">
<h3>5K / 10K Events</h3>
<ul>
<li class="accordion" id="a">Snowball Sprint</li>
<div class="panel">
<p>1/14/19, Mosquito Hill, New London</p>
</div>
<br>
<li class="accordion" id="a">Winter Warrior</li>
<div class="panel">
<p>2/06/19, Bay Beach, Green Bay</p>
</div>
<br>
<li class="accordion" id="a">Big Chill Run</li>
<div class="panel">
<p>2/24/19, Mid Valley Golf Course, De Pere</p>
</div>
</ul>
</div>
</div>
<div class="race_box">
<img src="images/run2.jpg" id="halfpic" /></button><br />
<figcaption>Half Marathon Events</figcaption>
<div class="current" id="half">
<h3>Half Marathon Events</h3>
<ul>
<li class="accordion" id="a">Fox River Marathon</li>
<div class="panel">
<p>10/15/18, Pierce Park, Appleton</p>
</div>
<br>
<li class="accordion" id="a">N.E.W. Half Marathon</li>
<div class="panel">
<p>10/29/18, Bay Beach Park, Green Bay</p>
</div>
<br>
<li class="accordion" id="a">Winnebago Run</li>
<div class="panel">
<p>11/27/18, Menominee Park, Oshkosh</p>
</div>
</ul>
</div>
<div class="future" id="half" >
<h3>Half Marathon Events</h3>
<ul>
<li class="accordion" id="a">Frosty Indoor Marathon</li>
<div class="panel">
<p>1/15/19, TryIt Ice Arena, Neenah</p>
</div>
<br>
<li class="accordion" id="a">Valentine Run</li>
<div class="panel">
<p>2/12/19, Green Isle Park, De Pere</p>
</div>
<br>
<li class="accordion" id="a">Snowball Marathon</li>
<div class="panel">
<p>3/03/19, Menominee Park, Oshkosh</p>
</div>
</ul>
</div>
</div>
<div class="race_box">
<img src="images/run3.jpg" id="fullpic" /><br />
<figcaption>Full Marathon Events</figcaption>
<div class="current" id="full">
<h3>Full Marathon Events</h3>
<ul>
<li class="accordion" id="a">Cheesehead Marathon</li>
<div class="panel">
<p>9/24/18, Pamperin Park, Green Bay</p>
</div>
<br>
<li class="accordion" id="a">Chain O'Lakes Marathon</li>
<div class="panel">
<p>10/29/18, Bay Beach Park, Green Bay</p>
</div>
<br>
<li class="accordion" id="a">Fox Cities Marathon</li>
<div class="panel">
<p>11/12/18, Menominee Park, Oshkosh</p>
</div>
</ul>
</div>
<div class="future" id="full">
<h3>Marathon Events</h3>
<ul>
<li class="accordion" id="a">Trailbreaker Marathon</li>
<div class="panel">
<p>4/02/19, Leach Amphitheatre, Oshkosh</p>
</div>
<br>
<li class="accordion" id="a">Jailbreak Marathon</li>
<div class="panel">
<p>4/16/19, Menominee Park, Oshkosh</p>
</div>
<br>
<li class="accordion" id="a">Cellcom Marathon</li>
<div class="panel">
<p>5/20/19, Lombardi Atrium, Green Bay</p>
</div>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
onload=hide;
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
hide(this);
this.nextElementSibling.classList.toggle("hide");
}
}
function hide(e){
for (i = 0; i < acc.length; i++) {
if(e!==acc[i] && acc[i].nextElementSibling.classList.value.indexOf("hide")<0)
acc[i].nextElementSibling.classList.toggle("hide");
}
}
</script>
<script>
$('.button').click(function(){
var $this = $(this);
$this.toggleClass('.button');
if($this.hasClass('.button')){
$this.text('Current Events');
} else {
$this.text('Future Events');
}
});
</script>
</body>
</html>
FV跑步者
.小组{
颜色：橙色；
}
#a:悬停{
颜色：灰色；
}
.隐藏{
显示：无；
}
.未来{
显示：无；
}
.按钮{
浮动：对；
右边距：110px；
}
福克斯山谷跑步俱乐部
时事
5k/10k赛事
5k/10赛事
迷你短跑
2018年10月30日，阿普尔顿纪念公园
铁马
18年6月11日，绿湾湾海滩公园
暮光之路
2018年11月13日，Wrightstown River's Edge公园
5K/10K赛事
雪球冲刺
19年1月14日，新伦敦蚊子山
冬季勇士
19年6月2日，绿湾湾海滩
大型冷跑
19年2月24日，德佩雷中谷高尔夫球场
半程马拉松比赛
半程马拉松比赛
福克斯河马拉松
2018年10月15日，阿普尔顿皮尔斯公园
纽西兰半程马拉松
18年10月29日，绿湾湾海滩公园
温尼贝戈跑步
18年11月27日，奥什科什美诺米尼公园
半程马拉松比赛
寒冷的室内马拉松
19年1月15日，尼纳特瑞伊特冰上竞技场
情人节跑步
19年12月2日，德佩雷绿岛公园
雪球马拉松
19年3月3日，奥什科什美诺米尼公园
全程马拉松比赛
全程马拉松比赛
奶酪头马拉松
绿湾潘佩林公园2018年9月24日
连锁奥莱克斯马拉松
18年10月29日，绿湾湾海滩公园
福克斯城市马拉松
2018年11月12日，奥什科什美诺米尼公园
马拉松比赛
开拓者马拉松
19年2月4日，奥什科什利奇圆形剧场
越狱马拉松
19年4月16日，奥什科什美诺米尼公园
Cellcom马拉松赛
19年5月20日，绿湾伦巴第中庭
onload=隐藏；
var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i$('.button').click(function(){
var $this = $(this);
$this.toggleClass('.button');
if($this.hasClass('.button')){
$this.text('Current Events');
$(".current").hide();
$(".future").show();
} else {
$this.text('Future Events');
$(".future").hide();
$(".current").show();
}
});
这是一个有效的解决方案：检查这个。在onclick中添加这两行
（回答您的问题“我做错了什么？”-->就是您没有对元素进行任何操作（不隐藏不显示），这就是问题所在）
将隐藏可见的元素，并显示隐藏的元素
onload=hide；
var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i$('.future').toggle();
$('.current').toggle();