javascript - 允许在使用 jQuery 循环时切换元素

Question

你好，我有以下内容

$(document).ready(function() {
  const mq = window.matchMedia("(min-width: 992px)");

  if (mq.matches) {
    $(".section-a .block").click(function() {
      $(".active")
        .removeClass("active")
        .next()
        .show()
        .addClass("active");
    });
  }
});

* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

:root {
  --lightBlack: #716d8e;
  --deepPurple: #4c4760;
  --lightGrey: #9aa3a7;
  --orange: #f6921e;
  --purple: #90278e;
  --black: #4c495f;
  --white: #ffffff;
  font-size: 100%;
}

html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: 'Barlow', sans-serif;
  scroll-behavior: smooth;
  font-weight: 400;
  font-size: 15px;
  display: block;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

@media(min-width: 992px) {
  .section-a {
    padding-bottom: 90px;
    margin-left: 81px;
  }

  .section-a .masthead { padding-bottom: 102px; }
  .section-a .masthead p { width: 709px; }

  .section-a .block {
    transition: all 0.5s ease-in-out;
    justify-content: space-between;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    display: -webkit-flex;
    flex-direction: row;
    display: -ms-flex;
    display: flex;
    height: auto;
  }

  .section-a .block.ptr,
  .section-a .block.pbl,
  .section-a .block.pls { margin-bottom: 21px; }

  .section-a .block .imagery {
    position: relative;
    display: none;
    width: 60%;
    order: 1;
    right: 0;
    top: 0;
  }

  .section-a .block .imagery img { position: absolute; }

  .section-a .block.ptr .imagery img {
    max-width: 80%;
    top: -37%;
  }

  .section-a .block.pbl .imagery img {
    margin-left: -95px;
    max-width: 60%;
    top: -95px;
  }

  .section-a .block.pls .imagery img {
    margin-left: -90px;
    max-width: 70%;
    top: -240px;
  }

  .section-a .block.ptr2 .imagery img {
    max-width: 100%;
    top: -179%;
  }

  .section-a .block .content h2 { color: var(--lightGrey); }

  .section-a .block p {
    color: var(--black);
    display: none;
    width: 269px;
  }

  .section-a .block .content { padding-left: 17.5px; }
  .section-a .block .top { padding-bottom: 0; }

  /* ACTIVE */
  .section-a .block:hover { cursor: pointer; }

  .section-a .block.ptr.ptr1.active,
  .section-a .block.pbl.active,
  .section-a .block.pls.active,
  .section-a .block.ptr.ptr2.active {
    border-left: 2px solid var(--purple);
    margin-bottom: 39px;
    cursor: pointer;
  }

  .section-a .block.ptr.ptr1.active h2,
  .section-a .block.pbl.active h2,
  .section-a .block.pls.active h2,
  .section-a .block.ptr.ptr2.active h2 { color: var(--purple); }

  .section-a .block.ptr.ptr1.active p,
  .section-a .block.pbl.active p,
  .section-a .block.pls.active p,
  .section-a .block.ptr.ptr2.active p,
  .section-a .block.ptr.ptr1.active .imagery,
  .section-a .block.pls.active .imagery,
  .section-a .block.pbl.active .imagery,
  .section-a .block.ptr.ptr2.active .imagery { display: block; }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- section a -->
  <section class="section-a">
    <div class="container">
      <div class="masthead">
        <h1>Never lose the thread of conversation again.</h1>
        <p>Love Slack threads, but hate getting lost in all the updates? Relax, Threadbot’s got this. It’s your team’s intelligent messaging assistant. </p>
      </div>

      <section class="block ptr ptr1 active">
        <div class="imagery">
          <div class="top">
            <img src="./assets/images/Prioritize-1.png" alt="threadbot desktop" class="always-on">
          </div>
        </div>

        <div class="content">
          <h2 class="purple">Prioritize, or snooze. You choose.</h2>
          <p>Not all threads are equal. Now you can prioritize each one so you know what to tackle first. Overwhelmed? Hit the snooze option. Share your thread priorities with your team to sync your efforts.</p>
        </div>
      </section>

      <section class="block pbl">
        <div class="imagery">
          <div class="top">
            <img src="./assets/images/Sorted-2.png" alt="threadbot desktop">
          </div>
        </div>

        <div class="content">
          <h2 class="purple">Get sorted.</h2>
          <p>Go way beyond the default 'All Threads' view. Zero in on what you want fast with Threadbot’s rich thread sorting options. Sort by channel, recent activity, priority (yours or others) and more.</p>
        </div>
      </section>

      <section class="block pls">
        <div class="imagery">
          <div class="top">
            <img src="./assets/images/Thread-3.png" alt="threadbot desktop">
          </div>
        </div>

        <div class="content">
          <h2 class="purple">Thread your email into Slack.</h2>
          <p>Constantly toggling back and forth between Slack and your email client? Pull your mail into a private channel and reply to emails right from Slack. See related emails with one click.
            Save time and focus your mind.</p>
        </div>
      </section>

      <section class="block ptr ptr2">
        <div class="imagery">
          <div class="top">
            <img src="./assets/images/Snippets-4.png" alt="threadbot desktop">
          </div>
        </div>

        <div class="content">
          <h2 class="purple">Share email snippets to a new thread.</h2>
          <p>Are you copy-pasting emails to share with colleagues? Put productivity back in your inbox. Threadbot starts a new thread for each email snippet or attachment you share, keeping things focused and easily trackable.</p>
        </div>
      </div>
    </section>
  </section>

我通过添加和删除一个 active 类来切换点击的每个 block ，一切正常，但是，我希望用户能够再次点击一个元素，所以总是一个元素显示在循环中，我不希望它在完成所有元素时就停止。

任何帮助都将非常有用，谢谢。

Answer 1

设置一个变量来指示您是否浏览了整个列表。因此，当它在循环时，您只需转到下一个。循环完成后，它会切换。

$(document).ready(function() {
  const mq = window.matchMedia("(min-width: 992px)");
  let loopDone = false;
  if (mq.matches) {
    $(".section-a .block").click(function() {
      if (!loopDone) {
        $(".active")
          .removeClass("active")
          .next()
          .show()
          .addClass("active");
        if ($(".active").length == 0) {
          loopDone = true;
        }
      } else {
        if ($(this).hasClass("active")) {
          $(this).removeClass("active")
            .next().addClass("active");
        } else {
          $(".active").removeClass("active");
          $(this).addClass("active");
        }
      }
    });
  }
});

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

:root {
  --lightBlack: #716d8e;
  --deepPurple: #4c4760;
  --lightGrey: #9aa3a7;
  --orange: #f6921e;
  --purple: #90278e;
  --black: #4c495f;
  --white: #ffffff;
  font-size: 100%;
}

html,
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: 'Barlow', sans-serif;
  scroll-behavior: smooth;
  font-weight: 400;
  font-size: 15px;
  display: block;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

@media(min-width: 992px) {
  .section-a {
    padding-bottom: 90px;
    margin-left: 81px;
  }
  .section-a .masthead {
    padding-bottom: 102px;
  }
  .section-a .masthead p {
    width: 709px;
  }
  .section-a .block {
    transition: all 0.5s ease-in-out;
    justify-content: space-between;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    display: -webkit-flex;
    flex-direction: row;
    display: -ms-flex;
    display: flex;
    height: auto;
  }
  .section-a .block.ptr,
  .section-a .block.pbl,
  .section-a .block.pls {
    margin-bottom: 21px;
  }
  .section-a .block .imagery {
    position: relative;
    display: none;
    width: 60%;
    order: 1;
    right: 0;
    top: 0;
  }
  .section-a .block .imagery img {
    position: absolute;
  }
  .section-a .block.ptr .imagery img {
    max-width: 80%;
    top: -37%;
  }
  .section-a .block.pbl .imagery img {
    margin-left: -95px;
    max-width: 60%;
    top: -95px;
  }
  .section-a .block.pls .imagery img {
    margin-left: -90px;
    max-width: 70%;
    top: -240px;
  }
  .section-a .block.ptr2 .imagery img {
    max-width: 100%;
    top: -179%;
  }
  .section-a .block .content h2 {
    color: var(--lightGrey);
  }
  .section-a .block p {
    color: var(--black);
    display: none;
    width: 269px;
  }
  .section-a .block .content {
    padding-left: 17.5px;
  }
  .section-a .block .top {
    padding-bottom: 0;
  }
  /* ACTIVE */
  .section-a .block:hover {
    cursor: pointer;
  }
  .section-a .block.ptr.ptr1.active,
  .section-a .block.pbl.active,
  .section-a .block.pls.active,
  .section-a .block.ptr.ptr2.active {
    border-left: 2px solid var(--purple);
    margin-bottom: 39px;
    cursor: pointer;
  }
  .section-a .block.ptr.ptr1.active h2,
  .section-a .block.pbl.active h2,
  .section-a .block.pls.active h2,
  .section-a .block.ptr.ptr2.active h2 {
    color: var(--purple);
  }
  .section-a .block.ptr.ptr1.active p,
  .section-a .block.pbl.active p,
  .section-a .block.pls.active p,
  .section-a .block.ptr.ptr2.active p,
  .section-a .block.ptr.ptr1.active .imagery,
  .section-a .block.pls.active .imagery,
  .section-a .block.pbl.active .imagery,
  .section-a .block.ptr.ptr2.active .imagery {
    display: block;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- section a -->
<section class="section-a">
  <div class="container">
    <div class="masthead">
      <h1>Never lose the thread of conversation again.</h1>
      <p>Love Slack threads, but hate getting lost in all the updates? Relax, Threadbot’s got this. It’s your team’s intelligent messaging assistant. </p>
    </div>

    <section class="block ptr ptr1 active">
      <div class="imagery">
        <div class="top">
          <img src="./assets/images/Prioritize-1.png" alt="threadbot desktop" class="always-on">
        </div>
      </div>

      <div class="content">
        <h2 class="purple">Prioritize, or snooze. You choose.</h2>
        <p>Not all threads are equal. Now you can prioritize each one so you know what to tackle first. Overwhelmed? Hit the snooze option. Share your thread priorities with your team to sync your efforts.</p>
      </div>
    </section>

    <section class="block pbl">
      <div class="imagery">
        <div class="top">
          <img src="./assets/images/Sorted-2.png" alt="threadbot desktop">
        </div>
      </div>

      <div class="content">
        <h2 class="purple">Get sorted.</h2>
        <p>Go way beyond the default 'All Threads' view. Zero in on what you want fast with Threadbot’s rich thread sorting options. Sort by channel, recent activity, priority (yours or others) and more.</p>
      </div>
    </section>

    <section class="block pls">
      <div class="imagery">
        <div class="top">
          <img src="./assets/images/Thread-3.png" alt="threadbot desktop">
        </div>
      </div>

      <div class="content">
        <h2 class="purple">Thread your email into Slack.</h2>
        <p>Constantly toggling back and forth between Slack and your email client? Pull your mail into a private channel and reply to emails right from Slack. See related emails with one click. Save time and focus your mind.</p>
      </div>
    </section>

    <section class="block ptr ptr2">
      <div class="imagery">
        <div class="top">
          <img src="./assets/images/Snippets-4.png" alt="threadbot desktop">
        </div>
      </div>

      <div class="content">
        <h2 class="purple">Share email snippets to a new thread.</h2>
        <p>Are you copy-pasting emails to share with colleagues? Put productivity back in your inbox. Threadbot starts a new thread for each email snippet or attachment you share, keeping things focused and easily trackable.</p>
      </div>
  </div>
  </section>
</section>