javascript - 如何更改一个按钮以在使用 jQuery 单击时切换当前/ future 事件？

Question

我创建了一个页面，其中显示了三张运行者的照片。
每张图片下面是三个事件的列表。当用户点击一个事件时，他们将看到事件下方列出的信息(日期/位置/城市)。
当他们点击一个按钮时，一切都应该变成 future 的事件。以及 future 事件新列表下的新信息。这是我的 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("N.E.W. 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>

更新:现在几乎一切正常。但是，当我单击 future 事件按钮时，它会显示 future 事件(应该如此)，按钮会更改为当前事件(应该如此)但它不会执行任何操作!我可以点击它来查看 future 的事件，但不能再次点击它来查看当前的事件。有什么想法吗？谢谢!

Answer 1

如果没有任何效果，可能是您忘记了在页面中包含 jQuery。

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

在 html 中添加这一行即可解决问题。

由于我在编辑您的问题时将其添加到片段中并且值正在发生变化，因此我正在写这个答案。

你需要 jQuery 文件因为，$.是一个类似于输入 jquery. 的 jQuery 函数

---

我发现的另一个问题是您正在替换元素的类。单击按钮后，您根本找不到 sprint 类!

你可以使用 $(".sprint").html("<li class='snowball'>Snowball Sprint</li>");而不是 $(".sprint").replaceWith("<li class='snowball'>Snowball Sprint</li>")

或者如果您希望类(class)滚雪球，那么您将无法访问 sprint 类(class)的 child ，因为那不存在!

同时向 ul 元素添加一个类，例如:

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

由于 ul 不能是 li 元素的子元素，您将为该元素创建另一个类，该类应该在 sprint 元素下。

并像这样使用 jquery: $(".sprintList .info").html("1/14/18<br/>Mosquito Hill<br/>New London");
更改日期和地点。

---

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

希望对你有帮助