使用 jQuery 单击时，如何更改一个按钮以切换当前/未来事件？

Question

I have a page I created showing three pictures of runners.
Under each picture is a list of three events. When the user clicks on an event, they will see the info(date/location/city) listed under the event.
When they click a button, then everything should change to future events. Along with new info under the new list of future events. Here is my HTML:

 $(document).ready(function() { var v = false; $("button#futureEvents").click(function(){ if (v == false){ $("li.sprint").text("Snowball Sprint"); $(".sprint").next().children().replaceWith("<li class='info'>1/14/18<br/>Mosquito Hill<br/>New London</li>"); $("li.iron").text("Winter Warrior"); $(".iron").next().children().replaceWith("<li class='info'>2/06/18<br/>Bay Beach<br/>Green Bay</li>"); $("li.twilight").text("Big Chill Run"); $(".twilight").next().children().replaceWith("<li class='info'>2/24/18<br/>Mid Valley Golf Course<br/>De Pere</li>"); $("li.fox").text("Frosty Indoor Marathon"); $(".fox").next().children().replaceWith("<li class='info'>1/15/18<br/>TryIt Ice Arena<br/>Neenah</li>"); $("li.new").text("Valentine Run"); $(".new").next().children().replaceWith("<li class='info'>2/12/18 <br/>Green Isle Park<br/> De Pere</li>"); $("li.winnebago").text("Snowball Marathon"); $(".winnebago").next().children().replaceWith("<li class='info'>3/03/18 <br/>Menominee Park <br/>Oshkosh</li>"); $("li.cheese").text("Trailbreaker Marathon"); $(".cheese").next().children().replaceWith("<li class='info'>4/02/18 <br/>Leach Amphitheatre<br/> Oshkosh</li>"); $("li.chain").text("Jailbreak Marathon"); $(".chain").next().children().replaceWith("<li class='info'>4/16/18 <br/>Menominee Park <br/>Oshkosh</li>"); $("li.foxCities").text("Cellcom Marathon"); $(".foxCities").next().children().replaceWith("<li class='info'>5/20/18<br/> Lombardi Atrium<br/> Green Bay</li>"); $("button").replaceWith("<button id='currentEvents'>Current Events</button>"); v = true; }//end v==false if statement });//end fututre events button $("button#currentEvents").click(function(){ if (v == true){ $("li.sprint").text("Mini Sprint"); $(".sprint").next().children().replaceWith("<li class='info'>10/30/17<br/>Memorial Park<br/>Appleton</li>"); $("li.iron").text("Iron Horse"); $(".iron").next().children().replaceWith("<li class='info'>11/06/17<br/>Bay Beach Park<br/>Green Bay</li>"); $("li.twilight").text("Twilight Trail"); $(".twilight").next().children().replaceWith("<li class='info'>11/13/17<br/>River's Edge Park<br/>Wrightstown</li>"); $("li.fox").text("Fox River Marathon"); $(".fox").next().children().replaceWith("<li class='info'>10/15/17<br/>Pierce Park<br/>Appleton</li>"); $("li.new").text("NEW Half Marathon"); $(".new").next().children().replaceWith("<li class='info'>10/29/17<br/>Bay Beach Park<br/>Green Bay</li>"); $("li.winnebago").text("Winnebago Run"); $(".winnebago").next().children().replaceWith("<li class='info'>11/27/17<br/>Menominee Park<br/>Oshkosh</li>"); $("li.cheese").text("Cheesehead Marathon"); $(".cheese").next().children().replaceWith("<li class='info'>9/24/17<br/>Pamperin Park<br/>Green Bay</li>"); $("li.chain").text("Chain O'Lakes Marathon"); $(".chain").next().children().replaceWith("<li class='info'>Marathon 10/29/17<br/>Bay Beach Park<br/>Green Bay</li>"); $("li.foxCities").text("Fox Cities Marathon"); $(".foxCities").next().children().replaceWith("<li class='info'>11/12/17<br/>Menominee Park<br/>Oshkosh</li>"); $("button").replaceWith("<button id='futureEvents'>Future Events</button>"); v = false; }//end v==true if statement });//end current events button $("li").click(function() { $(this).next().children().toggle(); });//end click function });//end document ready

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="race_box"> <img src="images/run1.jpg" /><br /> <figcaption>5k/10k Events</figcaption> <div class="races" id="5k"> <h3>5k/10 Events</h3> <ul> <li class="sprint">Mini Sprint</li> <ul> <li class="info">10/30/17<br/>Memorial Park<br/>Appleton</li> </ul> <li class="iron">Iron Horse</li> <ul> <li class="info">11/06/17<br/>Bay Beach Park<br/>Green Bay</li> </ul> <li class="twilight">Twilight Trail</li> <ul> <li class="info">11/13/17<br/>River's Edge Park<br/>Wrightstown</li> </ul> </ul> </div> <!-- End of '5k' div--> </div> <!-- End of 'run1' div--> <nav> <button id="futureEvents">Future Events</button> </nav>

UPDATE: Everything is almost working now. However, when I click the future events button, it shows the future events(as it should), the button is changed to current events(as it should) but it will not do anything! I can click it to see the future events, but cannot click it again to see the current events. Any thoughts? Thank you!

Answer 1

If nothing at all is working, probably you have forgotten to include jQuery in your page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Adding this line in the html would solve it.

Since i have added it in the snippet when i edited your question and the values are changing, i am writing this answer.

You need jQuery file because, $. is a jQuery function which is similar to typing jquery.

---

Another issue i found was that you are replacing the class of the elements. after you click the button, you dont find the sprint class at all!

you could use $(".sprint").html("<li class='snowball'>Snowball Sprint</li>"); instead of $(".sprint").replaceWith("<li class='snowball'>Snowball Sprint</li>")

or if you you want the class to be snowball, then you could not acess the children of sprint class because that does not exist!

Also add a class to the ul Element like:

<ul class="SprintList">
    <li class="info">10/30/17<br/>Memorial Park<br/>Appleton</li>
</ul>

Since ul cannot be a child of an li element , you would make another class for this element which is supposed to be under sprint element.

and use the jquery like: $(".sprintList .info").html("1/14/18<br/>Mosquito Hill<br/>New London");
to change the date and place.

---

 $(document).ready(function() { var v = false; $("button#futureEvents").click(function() { if (v == false) { /*if (.info==show){ $(".info").hide(); };//end info if statement*/ $(".sprint").html("<li class='snowball'>Snowball Sprint</li>"); $(".sprintList .info").html("1/14/18<br/>Mosquito Hill<br/>New London"); $(".iron").html("<li class='winter'>Winter Warrior</li>"); $(".ironList .info").html("2/06/18<br/>Bay Beach<br/>Green Bay"); $(".twilight").html("<li class='bigChill'>Big Chill Run</li>"); $(".twilightList .info").html("2/24/18<br/>Mid Valley Golf Course<br/>De Pere"); $("button").replaceWith("<button id='currentEvents'>Current Events</button>"); v = true; } //end v==false if statement }); //end fututre events button $("button#currentEvents").click(function() { }); //end current events button $("li").click(function() { $(this).next().children().toggle(); }); //end click function }); //end document ready

 <!--I add the JQuery here--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="race_box"> <img src="images/run1.jpg" /><br /> <figcaption>5k/10k Events</figcaption> <div class="races" id="5k"> <h3>5k/10 Events</h3> <ul> <li class="sprint">Mini Sprint</li> <ul class="sprintList"> <li class="info">10/30/17<br/>Memorial Park<br/>Appleton</li> </ul> <li class="iron">Iron Horse</li> <ul class="ironList"> <li class="info">11/06/17<br/>Bay Beach Park<br/>Green Bay</li> </ul> <li class="twilight">Twilight Trail</li> <ul class="twilightList"> <li class="info">11/13/17<br/>River's Edge Park<br/>Wrightstown</li> </ul> </ul> </div> <!-- End of '5k' div--> </div> <!-- End of 'run1' div--> <nav> <button id="futureEvents">Future Events</button> </nav>

Hope this helps

Answer 2

Instead of replace, use the .addClass() and .removeClass() methods in jQuery.

For example:

 $('h1').on('click', function() { $(this).addClass('blue'); })

 h1 { color: red; } .blue { color: blue; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1>Click Me</h1>

Answer 3

Should the ul with the info not be part of the first li?

For example:

  <li class="sprint">Mini Sprint
  <ul>
    <li class="info">10/30/17<br/>Memorial Park<br/>Appleton</li>
  </ul>
  </li>