javascript - 用于替换列表的按钮

Question

当单击按钮时，我尝试将每个不同部分下的 2017 事件替换为 2018 事件，反之亦然，以仅显示一个列表在每个事件下的某个时间。我知道有些事情不对，但我无法弄清楚。关于如何使这些按钮正常工作有什么建议吗？

$(document).ready(function() {
  var v = false;
  $("button#2018b").click(function() {
    if (v == false) {
      v = true;
    }
  }); //end button
  $("button#2017b").click(function() {
    if (v == true) {
      v = false;
    }
  }); //end button
}); //end document ready

//$("2017".replacewith("<li class='2018'/li>"); 
//$("2018".replacewith("<li class='2017'/li>");

.panel {
  display: none;
}

ul {
  list-style-type: none;
}

button {
  margin-left: 180px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
  <h1>Fox Valley Runners Club</h1>
</div>

<ul>
  <li class="nav"> <button id="2018B">Future Events - 2018</button> </li>
  <li class="nav"> <button id="2017B">Current Events - 2017</button> </li>

</ul>

<div id="main"></div>

<div id="pics">
  <div class="race_box">
    <img src="images/run1.jpg" id="5kpic" /><br />

    <figcaption>5k/10k Events</figcaption>

    <div class="races" id="5k">
      <h3>5k/10 Events</h3>
      <ul>
        <li class="2017">Mini Sprint</li>
        <li class="2017">Iron Horse</li>
        <li class="2017">Twilight Trail</li>

      </ul>
    </div>
    <div class="races" id="5K">
      <h3>5K / 10K Events</h3>
      <ul>
        <li class="2018">Snowball Sprint</br> 1/14/18 </br>Mosquito Hill </br>New London</li>
        <li class="2018">Winter Warrior </br>2/06/18 </br>Bay Beach</br> Green Bay</li>
        <li class="2018">Big Chill Run </br>2/24/18</br> Mid Valley Golf Course </br>De Pere</li>
      </ul>
    </div>

  </div>

  <div class="race_box">
    <img src="images/run2.jpg" id="halfpic" /></button><br />
    <figcaption>Half Marathon Events</figcaption>

    <div class="races" id="half">
      <h3>Half Marathon Events</h3>
      <ul>
        <li class="2017">Fox River Marathon</li>
        <li class="2017">N.E.W. Half Marathon</li>
        <li class="2017">Winnebago Run</li>


      </ul>
    </div>
    <div class="races" id="half">
      <h3>Half Marathon Events</h3>
      <ul>
        <li class="2018">Frosty Indoor Marathon</br> 1/15/18 </br>TryIt Ice Arena</br> Neenah</li>
        <li class="2018">Valentine Run </br>2/12/18 </br>Green Isle Park</br> De Pere</li>
        <li class="2018">Snowball Marathon </br>3/03/18 </br>Menominee Park </br>Oshkosh</li>
      </ul>
    </div>
  </div>

  <div class="race_box">
    <img src="images/run3.jpg" id="fullpic" /><br />
    <figcaption>Full Marathon Events</figcaption>

    <div class="races" id="full">
      <h3>Full Marathon Events</h3>
      <ul>
        <li class="2017">Cheesehead Marathon</li>
        <li class="2017">Chain O'Lakes Marathon</li>
        <li class="2017">Fox Cities Marathon</li>
      </ul>
    </div>

    <div class="races" id="full">
      <h3>Full Marathon Events</h3>
      <ul>
        <li class="2018">Trailbreaker Marathon</br> 4/02/18 </br>Leach Amphitheatre</br> Oshkosh</li>
        <li class="2018">Jailbreak Marathon </br> 4/16/18 </br>Menominee Park </br>Oshkosh</li>
        <li class="2018">Cellcom Marathon </br>5/20/18</br> Lombardi Atrium</br> Green Bay </li>
      </ul>
    </div>

  </div>

</div>

Answer 1

备注

设置<div>到对应<button> 。

<button id="show-event">Event</button>
<div id="event"></div>

隐藏所有div，但只显示一个。在每个按钮上单击隐藏当前 div 并显示选定 div。

示例

var events = document.querySelectorAll("div[id^=events-]");
var btnEvents = document.querySelectorAll("button[id^=show-events-]");
var currBtn = document.querySelector("button[id^=show-events-][class=active]");
var idCurrEvent = currBtn.getAttribute("id").replace("show-", "");
var currEvent = document.getElementById(idCurrEvent);
currEvent.classList.add("show");

btnEvents.forEach(btn => {
  btn.addEventListener("click", function() {
    currBtn.classList.remove("active");
    this.classList.add("active");
    currBtn = this;
    currEvent.classList.remove("show");
    currEvent = document.getElementById(this.id.replace("show-", ""));
    currEvent.classList.add("show");
  });
});

button {
  outline: none;
}

.active {
  border: 1px solid orange;
}

div[id^=events-] {
  display: none;
}

.show {
  display: block !important;
}

<h1>Events</h1>

<button id="show-events-2016">2016</button>
<button id="show-events-2017" class="active">2017</button>
<button id="show-events-2018">2018</button>

<div id="events-2016">
  <ul>
    <li>Event 1 2016</li>
    <li>Event 2 2016</li>
    <li>Event 3 2016</li>
  </ul>
</div>


<div id="events-2017">
  <ul>
    <li>Event 1 2017</li>
    <li>Event 2 2017</li>
    <li>Event 3 2017</li>
  </ul>
</div>

<div id="events-2018">
  <ul>
    <li>Event 1 2018</li>
    <li>Event 2 2018</li>
    <li>Event 3 2018</li>
  </ul>
</div>