如何解决我在 javascript 中翻转卡片的问题？

【问题标题】：How can I resolve my problem about flip cards in javascript?如何解决我在 javascript 中翻转卡片的问题？
【发布时间】：2021-07-04 01:56:16
【问题描述】：

我的 Javascript 代码有问题。我想通过单击一个按钮（在我的例子中，称为“结果”的按钮）来翻转我的卡片。但我的问题是当我点击第一个按钮“结果”时，所有卡片都会翻转。所以我尝试做两个foreach，但是没有用。

这是我的代码：

const cards = document.querySelectorAll(".cards__single");
const resultsButton = document.querySelectorAll ("results-button");
const backButton = document.querySelectorAll ("back-button");

cards.forEach((card) => {
  resultsButton.addEventListener("click", () => {
    card.classList.add('do-flip');
  });

  backButton.addEventListener("click", () => {
    card.classList.remove('do-flip');
  });
});
p {
  line-height: 24px;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

.tournaments-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.tournaments-section .tournament {
  flex: 33.333%;
  max-width: 33.3333%;
}

.cards {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-content: center;
  position: relative;
  perspective: 1000px;
  align-items: stretch;
}

.tournaments-section .cards {
  padding: 0 15px;
}

.cards__single {
  width: 100%;
  border-radius: 5px;
  box-shadow: 0 5px 18px rgb(0 0 0 / 60%);
  cursor: pointer;
  text-align: center;
  -webkit-transition: transform .6s;
  transform-style: preserve-3d;
  transition: .5s;
  -webkit-transition: .5s;
  position: relative;
  transition: transform .6s;
  -webkit-transition: transform .6s;
  background-color: rgba(27,40,56,.95);
  display: block;
  margin-bottom: 24px;
  border: 1px solid #41485a;
}

.cards__front, .cards__back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
}

.cards__front {
  height: 100%;
  transform: rotateX(0deg);
  -webkit-transform: rotateX(0deg);
}

.cards__front>.cards__front__header {
  position: relative;
  height: 100%;
  max-height: 250px;
  min-height: 250px;
  overflow: hidden;
  background-color: #373f50;
}

.cards__front>.cards__front__body {
  padding: 8px 16px;
  position: relative;
  border-top: 1px solid #41485a;
}

.cards__front>.cards__front__footer {
  padding: 8px 16px;
  display: flex;
  justify-content: space-around;
}

.pfl-button {
  background: none;
  border: 0;
  box-sizing: border-box;
  padding: 1em;
  box-shadow: inset 0 0 0 2px #ffffff;
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: inherit;
  font-weight: 700;
  position: relative;
  vertical-align: middle;
  text-transform: uppercase;
}

.pfl-button::before, .pfl-button::after {
  box-sizing: inherit;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}

.draw {
  transition: color 0.25s;
}

.draw::before, .draw::after {
  border: 2px solid transparent;
  width: 0;
  height: 0;
}

.draw::before {
  top: 0;
  left: 0;
}

.meet::after {
  top: 0;
  left: 0;
}

.cards__single .pfl-button {
  padding: 1em;
  background-color: rgba(255, 255, 255, 0.2);
}

.cards__back {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  position: absolute;
  text-align: center;
  right: 0;
  left: 0;
  top: 10px;
}

.cards__results {
  display: flex;
  justify-content: space-around;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.do-flip {
  -o-transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}
<div class="tournaments-section">

  <div class="tournament">
    <div class="cards">
      <div class="cards__single">
        <div class="cards__front">
          <div class="cards__front__header">
            <div class="image">
              <img class="cards__image" src="https://media-exp3.licdn.com/dms/image/C4D1BAQGJH3oVZgtvJA/company-background_10000/0/1569871136613?e=2159024400&v=beta&t=1O1eAL83swfIbvGoF1Rs5M1XES_1lgTN60tWBWgvAr0" alt="PFL - 06/06/21 - Dragon Ball Fighterz">
            </div>
            <div class="cover">
              <h3 class="text" tabindex="0">Title 1</h3>
            </div>
          </div>
          <div class="cards__front__body">
            Hello World 1
          </div>
          <div class="cards__front__footer">
            <button id="flip-card-btn-turn-to-back" class="pfl-button draw meet results-button">Results</button>
            <a href="#" target="_blank" class="pfl-button draw meet">
              Button 2
            </a>
            <a href="#" target="_blank" class="pfl-button draw meet">Button 3</a>
          </div>
        </div>
        <div class="cards__back">
          <div class="cards__results">
            <div class="cards__top">
              <h3>Title</h3>
            </div>
          </div>
          <div class="cards__front__footer">
            <button id="flip-card-btn-turn-to-front" class="pfl-button draw meet back-button">Go back</button>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="tournament">
    <div class="cards">
      <div class="cards__single">
        <div class="cards__front">
          <div class="cards__front__header">
            <div class="image">
              <img class="cards__image" src="https://media-exp3.licdn.com/dms/image/C4D1BAQGJH3oVZgtvJA/company-background_10000/0/1569871136613?e=2159024400&v=beta&t=1O1eAL83swfIbvGoF1Rs5M1XES_1lgTN60tWBWgvAr0" alt="PFL - 10/06/21 - Guilty Gear Strive">
            </div>
            <div class="cover">
              <h3 class="text" tabindex="0">Title</h3>
            </div>
          </div>
          <div class="cards__front__body">
            Hello World 2
          </div>
          <div class="cards__front__footer">
            <button id="flip-card-btn-turn-to-back" class="pfl-button draw meet results-button">Results</button>
          </div>
        </div>
        <div class="cards__back">
          <div class="cards__results">
            <div class="cards__top">
              <h3>Title 2</h3>

            </div>
            <div class="cards__ranking">
              <h3>Classement</h3>
            </div>
          </div>
          <div class="cards__front__footer">
            <button id="flip-card-btn-turn-to-front" class="pfl-button draw meet back-button">Go back</button>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="tournament">
    <div class="cards">
      <div class="cards__single">
        <div class="cards__front">
          <div class="cards__front__header">
            <div class="image">
              <img class="cards__image" src="https://media-exp3.licdn.com/dms/image/C4D1BAQGJH3oVZgtvJA/company-background_10000/0/1569871136613?e=2159024400&v=beta&t=1O1eAL83swfIbvGoF1Rs5M1XES_1lgTN60tWBWgvAr0">
            </div>
            <div class="cover">
              <h3 class="text" tabindex="0">Title 3</h3>
            </div>
          </div>
          <div class="cards__front__body">
            Hello World 3
          </div>
          <div class="cards__front__footer">
            <button id="flip-card-btn-turn-to-back" class="pfl-button draw meet results-button">Results</button>
            <a href="https://smash.gg/tournament/parisienne-fighting-ligue/event/pfl-10-06-21-dragon-ball-fighterz/overview" target="_blank" class="pfl-button draw meet">
              Bracket
            </a>
          </div>
        </div>
        <div class="cards__back">
          <div class="cards__results">
            <div class="cards__top">
              <h3>Title</h3>                                 </div>
            <div class="cards__ranking">
              <h3>Standings</h3>
            </div>
          </div>
          <div class="cards__front__footer">
            <button id="flip-card-btn-turn-to-front" class="pfl-button draw meet back-button">Go back</button>
          </div>
        </div>
      </div>
    </div>
  </div>





</div>

提前感谢您的帮助！

【问题讨论】：

  • 您的代码中有错误 sn-p querySelectorAll ("results-button") 和 querySelectorAll ("back-button") 不知道该选择什么

标签： javascript html css addeventlistener


【解决方案1】：

如果您在开始时选择了所有按钮，则将函数绑定到所有按钮。

相反，您需要在 foreach 中找到每个按钮作为 card 元素的子元素。此时，您将第一个侦听器分配给唯一的结果按钮（在该特定卡片元素内），并将另一个侦听器分配给唯一的后退按钮。

修复了下面的sn-p，我只编辑了javascript部分。

旁注：当您使用querySelector 或querySelectorAll 并希望通过其ID 访问某些东西时，例如css 规则，您需要先指定#。就像您在使用 . 作为前缀的 css 类中所做的那样。

const cards = document.querySelectorAll(".cards__single");

cards.forEach((card) => {
  // Use querySelector starting from card, not from document
  const resultsButton = card.querySelector("#flip-card-btn-turn-to-back");
  resultsButton.addEventListener("click", () => {
    card.classList.add('do-flip');
  });
  
  // Same for the back button, card.querySelector instead of document.querySelector
  const backButton = card.querySelector("#flip-card-btn-turn-to-front");
  backButton.addEventListener("click", () => {
    card.classList.remove('do-flip');
  });
});
p {
  line-height: 24px;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

.tournaments-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.tournaments-section .tournament {
  flex: 33.333%;
  max-width: 33.3333%;
}

.cards {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-content: center;
  position: relative;
  perspective: 1000px;
  align-items: stretch;
}

.tournaments-section .cards {
  padding: 0 15px;
}

.cards__single {
  width: 100%;
  border-radius: 5px;
  box-shadow: 0 5px 18px rgb(0 0 0 / 60%);
  cursor: pointer;
  text-align: center;
  -webkit-transition: transform .6s;
  transform-style: preserve-3d;
  transition: .5s;
  -webkit-transition: .5s;
  position: relative;
  transition: transform .6s;
  -webkit-transition: transform .6s;
  background-color: rgba(27,40,56,.95);
  display: block;
  margin-bottom: 24px;
  border: 1px solid #41485a;
}

.cards__front, .cards__back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
}

.cards__front {
  height: 100%;
  transform: rotateX(0deg);
  -webkit-transform: rotateX(0deg);
}

.cards__front>.cards__front__header {
  position: relative;
  height: 100%;
  max-height: 250px;
  min-height: 250px;
  overflow: hidden;
  background-color: #373f50;
}

.cards__front>.cards__front__body {
  padding: 8px 16px;
  position: relative;
  border-top: 1px solid #41485a;
}

.cards__front>.cards__front__footer {
  padding: 8px 16px;
  display: flex;
  justify-content: space-around;
}

.pfl-button {
  background: none;
  border: 0;
  box-sizing: border-box;
  padding: 1em;
  box-shadow: inset 0 0 0 2px #ffffff;
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: inherit;
  font-weight: 700;
  position: relative;
  vertical-align: middle;
  text-transform: uppercase;
}

.pfl-button::before, .pfl-button::after {
  box-sizing: inherit;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}

.draw {
  transition: color 0.25s;
}

.draw::before, .draw::after {
  border: 2px solid transparent;
  width: 0;
  height: 0;
}

.draw::before {
  top: 0;
  left: 0;
}

.meet::after {
  top: 0;
  left: 0;
}

.cards__single .pfl-button {
  padding: 1em;
  background-color: rgba(255, 255, 255, 0.2);
}

.cards__back {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  position: absolute;
  text-align: center;
  right: 0;
  left: 0;
  top: 10px;
}

.cards__results {
  display: flex;
  justify-content: space-around;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.do-flip {
  -o-transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}
<div class="tournaments-section">

  <div class="tournament">
    <div class="cards">
      <div class="cards__single">
        <div class="cards__front">
          <div class="cards__front__header">
            <div class="image">
              <img class="cards__image" src="https://media-exp3.licdn.com/dms/image/C4D1BAQGJH3oVZgtvJA/company-background_10000/0/1569871136613?e=2159024400&v=beta&t=1O1eAL83swfIbvGoF1Rs5M1XES_1lgTN60tWBWgvAr0" alt="PFL - 06/06/21 - Dragon Ball Fighterz">
            </div>
            <div class="cover">
              <h3 class="text" tabindex="0">Title 1</h3>
            </div>
          </div>
          <div class="cards__front__body">
            Hello World 1
          </div>
          <div class="cards__front__footer">
            <button id="flip-card-btn-turn-to-back" class="pfl-button draw meet results-button">Results</button>
            <a href="#" target="_blank" class="pfl-button draw meet">
              Button 2
            </a>
            <a href="#" target="_blank" class="pfl-button draw meet">Button 3</a>
          </div>
        </div>
        <div class="cards__back">
          <div class="cards__results">
            <div class="cards__top">
              <h3>Title</h3>
            </div>
          </div>
          <div class="cards__front__footer">
            <button id="flip-card-btn-turn-to-front" class="pfl-button draw meet back-button">Go back</button>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="tournament">
    <div class="cards">
      <div class="cards__single">
        <div class="cards__front">
          <div class="cards__front__header">
            <div class="image">
              <img class="cards__image" src="https://media-exp3.licdn.com/dms/image/C4D1BAQGJH3oVZgtvJA/company-background_10000/0/1569871136613?e=2159024400&v=beta&t=1O1eAL83swfIbvGoF1Rs5M1XES_1lgTN60tWBWgvAr0" alt="PFL - 10/06/21 - Guilty Gear Strive">
            </div>
            <div class="cover">
              <h3 class="text" tabindex="0">Title</h3>
            </div>
          </div>
          <div class="cards__front__body">
            Hello World 2
          </div>
          <div class="cards__front__footer">
            <button id="flip-card-btn-turn-to-back" class="pfl-button draw meet results-button">Results</button>
          </div>
        </div>
        <div class="cards__back">
          <div class="cards__results">
            <div class="cards__top">
              <h3>Title 2</h3>

            </div>
            <div class="cards__ranking">
              <h3>Classement</h3>
            </div>
          </div>
          <div class="cards__front__footer">
            <button id="flip-card-btn-turn-to-front" class="pfl-button draw meet back-button">Go back</button>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="tournament">
    <div class="cards">
      <div class="cards__single">
        <div class="cards__front">
          <div class="cards__front__header">
            <div class="image">
              <img class="cards__image" src="https://media-exp3.licdn.com/dms/image/C4D1BAQGJH3oVZgtvJA/company-background_10000/0/1569871136613?e=2159024400&v=beta&t=1O1eAL83swfIbvGoF1Rs5M1XES_1lgTN60tWBWgvAr0">
            </div>
            <div class="cover">
              <h3 class="text" tabindex="0">Title 3</h3>
            </div>
          </div>
          <div class="cards__front__body">
            Hello World 3
          </div>
          <div class="cards__front__footer">
            <button id="flip-card-btn-turn-to-back" class="pfl-button draw meet results-button">Results</button>
            <a href="https://smash.gg/tournament/parisienne-fighting-ligue/event/pfl-10-06-21-dragon-ball-fighterz/overview" target="_blank" class="pfl-button draw meet">
              Bracket
            </a>
          </div>
        </div>
        <div class="cards__back">
          <div class="cards__results">
            <div class="cards__top">
              <h3>Title</h3>                                 </div>
            <div class="cards__ranking">
              <h3>Standings</h3>
            </div>
          </div>
          <div class="cards__front__footer">
            <button id="flip-card-btn-turn-to-front" class="pfl-button draw meet back-button">Go back</button>
          </div>
        </div>
      </div>
    </div>
  </div>





</div>

【讨论】：

  • 感谢您的回答（和大家）！我没有注意到我一开始就选择了所有按钮
【解决方案2】：

document.querySelectorAll 返回数组。数组没有方法addEventListener。 你需要这样做：

resultsButton.map(button => {
  button.addEventListener("click", () => {
    card.classList.add('do-flip');
  });
});

【讨论】：

    【解决方案3】：

    就像其他人提到的那样，您正在选择所有按钮并添加相同的操作。

    如果您从卡片中选择按钮，您将获得每张卡片的按钮。另请注意，类上的querySelectorAll() 将返回一个数组/对象，因此必须使用[0] 来选择按钮索引。

    const cards = document.querySelectorAll(".cards__single");

cards.forEach((card) => {
  let resultsButton = card.querySelectorAll(".results-button")[0];
  let backButton = card.querySelectorAll(".back-button")[0];

  if (resultsButton) {
    resultsButton.addEventListener("click", () => {
      card.classList.add('do-flip');
    });
  }

  if (backButton) {
    backButton.addEventListener("click", () => {
      card.classList.remove('do-flip');
    });
  }
});
    p {
  line-height: 24px;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

.tournaments-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.tournaments-section .tournament {
  flex: 33.333%;
  max-width: 33.3333%;
}

.cards {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-content: center;
  position: relative;
  perspective: 1000px;
  align-items: stretch;
}

.tournaments-section .cards {
  padding: 0 15px;
}

.cards__single {
  width: 100%;
  border-radius: 5px;
  box-shadow: 0 5px 18px rgb(0 0 0 / 60%);
  cursor: pointer;
  text-align: center;
  -webkit-transition: transform .6s;
  transform-style: preserve-3d;
  transition: .5s;
  -webkit-transition: .5s;
  position: relative;
  transition: transform .6s;
  -webkit-transition: transform .6s;
  background-color: rgba(27, 40, 56, .95);
  display: block;
  margin-bottom: 24px;
  border: 1px solid #41485a;
}

.cards__front,
.cards__back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
}

.cards__front {
  height: 100%;
  transform: rotateX(0deg);
  -webkit-transform: rotateX(0deg);
}

.cards__front>.cards__front__header {
  position: relative;
  height: 100%;
  max-height: 250px;
  min-height: 250px;
  overflow: hidden;
  background-color: #373f50;
}

.cards__front>.cards__front__body {
  padding: 8px 16px;
  position: relative;
  border-top: 1px solid #41485a;
}

.cards__front>.cards__front__footer {
  padding: 8px 16px;
  display: flex;
  justify-content: space-around;
}

.pfl-button {
  background: none;
  border: 0;
  box-sizing: border-box;
  padding: 1em;
  box-shadow: inset 0 0 0 2px #ffffff;
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: inherit;
  font-weight: 700;
  position: relative;
  vertical-align: middle;
  text-transform: uppercase;
}

.pfl-button::before,
.pfl-button::after {
  box-sizing: inherit;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}

.draw {
  transition: color 0.25s;
}

.draw::before,
.draw::after {
  border: 2px solid transparent;
  width: 0;
  height: 0;
}

.draw::before {
  top: 0;
  left: 0;
}

.meet::after {
  top: 0;
  left: 0;
}

.cards__single .pfl-button {
  padding: 1em;
  background-color: rgba(255, 255, 255, 0.2);
}

.cards__back {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  position: absolute;
  text-align: center;
  right: 0;
  left: 0;
  top: 10px;
}

.cards__results {
  display: flex;
  justify-content: space-around;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.do-flip {
  -o-transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}
    <div class="tournaments-section">

  <div class="tournament">
    <div class="cards">
      <div class="cards__single">
        <div class="cards__front">
          <div class="cards__front__header">
            <div class="image">
              <img class="cards__image" src="https://media-exp3.licdn.com/dms/image/C4D1BAQGJH3oVZgtvJA/company-background_10000/0/1569871136613?e=2159024400&v=beta&t=1O1eAL83swfIbvGoF1Rs5M1XES_1lgTN60tWBWgvAr0" alt="PFL - 06/06/21 - Dragon Ball Fighterz">
            </div>
            <div class="cover">
              <h3 class="text" tabindex="0">Title 1</h3>
            </div>
          </div>
          <div class="cards__front__body">
            Hello World 1
          </div>
          <div class="cards__front__footer">
            <button id="flip-card-btn-turn-to-back" class="pfl-button draw meet results-button">Results</button>
            <a href="#" target="_blank" class="pfl-button draw meet">
              Button 2
            </a>
            <a href="#" target="_blank" class="pfl-button draw meet">Button 3</a>
          </div>
        </div>
        <div class="cards__back">
          <div class="cards__results">
            <div class="cards__top">
              <h3>Title</h3>
            </div>
          </div>
          <div class="cards__front__footer">
            <button id="flip-card-btn-turn-to-front" class="pfl-button draw meet back-button">Go back</button>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="tournament">
    <div class="cards">
      <div class="cards__single">
        <div class="cards__front">
          <div class="cards__front__header">
            <div class="image">
              <img class="cards__image" src="https://media-exp3.licdn.com/dms/image/C4D1BAQGJH3oVZgtvJA/company-background_10000/0/1569871136613?e=2159024400&v=beta&t=1O1eAL83swfIbvGoF1Rs5M1XES_1lgTN60tWBWgvAr0" alt="PFL - 10/06/21 - Guilty Gear Strive">
            </div>
            <div class="cover">
              <h3 class="text" tabindex="0">Title</h3>
            </div>
          </div>
          <div class="cards__front__body">
            Hello World 2
          </div>
          <div class="cards__front__footer">
            <button id="flip-card-btn-turn-to-back" class="pfl-button draw meet results-button">Results</button>
          </div>
        </div>
        <div class="cards__back">
          <div class="cards__results">
            <div class="cards__top">
              <h3>Title 2</h3>

            </div>
            <div class="cards__ranking">
              <h3>Classement</h3>
            </div>
          </div>
          <div class="cards__front__footer">
            <button id="flip-card-btn-turn-to-front" class="pfl-button draw meet back-button">Go back</button>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="tournament">
    <div class="cards">
      <div class="cards__single">
        <div class="cards__front">
          <div class="cards__front__header">
            <div class="image">
              <img class="cards__image" src="https://media-exp3.licdn.com/dms/image/C4D1BAQGJH3oVZgtvJA/company-background_10000/0/1569871136613?e=2159024400&v=beta&t=1O1eAL83swfIbvGoF1Rs5M1XES_1lgTN60tWBWgvAr0">
            </div>
            <div class="cover">
              <h3 class="text" tabindex="0">Title 3</h3>
            </div>
          </div>
          <div class="cards__front__body">
            Hello World 3
          </div>
          <div class="cards__front__footer">
            <button id="flip-card-btn-turn-to-back" class="pfl-button draw meet results-button">Results</button>
            <a href="https://smash.gg/tournament/parisienne-fighting-ligue/event/pfl-10-06-21-dragon-ball-fighterz/overview" target="_blank" class="pfl-button draw meet">
              Bracket
            </a>
          </div>
        </div>
        <div class="cards__back">
          <div class="cards__results">
            <div class="cards__top">
              <h3>Title</h3>
            </div>
            <div class="cards__ranking">
              <h3>Standings</h3>
            </div>
          </div>
          <div class="cards__front__footer">
            <button id="flip-card-btn-turn-to-front" class="pfl-button draw meet back-button">Go back</button>
          </div>
        </div>
      </div>
    </div>
  </div>





</div>

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 2021-02-19
      • 1970-01-01
      • 1970-01-01
      • 2020-09-01
      • 2021-03-02
      • 1970-01-01
      • 1970-01-01
      • 2021-02-17
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode