按钮点击时JQuery切换类

时间：2018-03-22 22:22:20

标签： javascript jquery

单击时，我需要我的按钮在当前事件和未来事件之间切换。目前，按钮上的文字会发生变化，但页面上的实际事件不会切换。

在页面加载时，会显示当前事件和“当前事件”按钮。当我单击“当前事件”按钮时，按钮文本切换到“未来事件”。每种种族类型下的实际事件应该切换到未来事件，但它们不会切换。谁能告诉我，我做错了什么？

谢谢！

<!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>

2 个答案:

答案 0 :(得分：1)

检查一下。在你的onclick中添加这两行。

（回答你的问题'我做错了什么？' - ＆gt;是你对元素一无所知（没有隐藏没有显示），那就错了）

$('.future').toggle();
$('.current').toggle();
如果元素可见，则

.toggle() 会隐藏元素，如果元素被隐藏，则会显示元素。

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");
    }
}
$('.button').click(function() {
    var $this = $(this);
    $this.toggleClass('button');
    $('.future').toggle();
    $('.current').toggle();
    if ($this.hasClass('button')) {
        $this.text('Current Events');
    } else {
        $this.text('Future Events');
    }
});
.panel {
            color: orange;
        }

        #a:hover {
            color: gray;
        }

        .hide {
            display: none;
        }

        .future {
            display: none;
        }

        .button {
            margin-right: 110px;

        }
<!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" />
</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="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">


        <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">


        <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>


</body>

</html>

答案 1 :(得分：0)

由于您的不同活动有课程，未来＆＃39;和＆＃39;当前＆＃39;您可以使用它们在按下按钮时显示和隐藏事件。

$('.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();
    }
});

以下是此解决方案的实际应用：https://jsfiddle.net/Rikkokiri/6r8cke0y/5/

相关问题
最新问题