Question

我当时正在学习JavaScript，并观看了有关使用onclick事件的视频，{https://www.youtube.com/watch?v=XQEfWd1lh4Q&list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET&index=41&t=23s).Basically，这个人制作了一张卡片，可以扩展以显示其截取的部分内容。只是通过观看视频而有所了解。因此，为了加深我的理解，我决定重新编码视频中显示的内容，而无需回头。

我有点想要的东西，但是有一件小事让我感到沮丧。运行代码时，我的浓缩卡带有显示“ Show More”（显示更多）的按钮（不错），但是当我按下按钮时，卡会展开，但按钮仍显示“ Show More”（显示更多）它开始变坏），并且只有当我第三次按下按钮来压缩卡时，按钮才会显示“ Show Less”。

var contentDiv = document.querySelector('.content');
var button = document.querySelector('.button');

button.onclick = function(){
  if(contentDiv.className == 'content'){
    contentDiv.classList.add('appear');
    button.innerHTML = 'Show More';
  } else if(contentDiv.className == 'content appear'){
    contentDiv.classList.remove('appear');
    button.innerHTML = 'Show Less';
  }
};

*{
  margin: 0;
  padding: 0;
}

body{
  background: #a1a1a1;
}

.group{
  margin-top: 10%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

.content{
  background: #dedede;
  border-radius: 10px;
  width: 250px;
  height: 300px;
  overflow: hidden;
  color: #2e2e2e;
  background: #e8e8e8;

  transition: all .5s;
}

.appear{
  height: 530px;
  color: #e8e8e8;
  background: #2e2e2e;
}

.content p{
  margin: 10px;
}

.button{
  margin: 10px;
  background: #f0ca62;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Events</title>
    <link rel="stylesheet" href="./css/style.css">
  </head>
  <body>
    <div class="group">
      <div class="content">
        <p>width inflation scrape lamp continuation insistence proof pioneer trait
          vegetation dorm bring ball charter joy brick cabinet nest use economist
          width inflation scrape lamp continuation insistence proof pioneer trait
          vegetation dorm bring ball charter joy brick cabinet nest use economist
          width inflation scrape lamp continuation insistence proof pioneer trait
          vegetation dorm bring ball charter joy brick cabinet nest use economist
        </p>
        <p>width inflation scrape lamp continuation insistence proof pioneer trait
          vegetation dorm bring ball charter joy brick cabinet nest use economist
          width inflation scrape lamp continuation insistence proof pioneer trait
          vegetation dorm bring ball charter joy brick cabinet nest use economist
        </p>
        <p>width inflation scrape lamp continuation insistence proof pioneer trait
          vegetation dorm bring ball charter joy brick cabinet nest use economist
        </p>
      </div>

      <a class="button">Show More</a>
    </div>


    <script type="text/javascript" src="./js/script.js"></script>
  </body>
</html>

link to code in codepen

Answer 1

似乎多了显示少了按钮，请尝试以下操作：

button.onclick = function(){
  if(contentDiv.className == 'content'){
    contentDiv.classList.add('appear');
    button.innerHTML = 'Show Less';
  } else if(contentDiv.className == 'content appear'){
    contentDiv.classList.remove('appear');
    button.innerHTML = 'Show More';
  }
};

为什么我的按钮与onclick事件不同步？

1 个答案: