我不能包括代码助手的js。

Question

我找到了一个代码：https://codepen.io/cassivesuvian/pen/BamOEra

一切都很好--但是当我想将js添加成这样的文本脚本时，它就不起作用了。

    <script type="text/javascript">
let more = document.querySelectorAll('.more');
for(let i = 0; i < more.length; i++) {
  more[i].addEventListener('click', function() {
    more[i].parentNode.classList.toggle('active')
  })
}
    </script>

我要做什么？我在这个代码库中找不到任何设置。

谢谢。

Answer 1

code added

​

let more = document.querySelectorAll('.more');
for(let i = 0; i < more.length; i++) {
  more[i].addEventListener('click', function() {
    more[i].parentNode.classList.toggle('active')
  })
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}
body {
  display: flex;
  align-text: center;
  justify-content: center;
  min-height: 100vh;
  background: #222;
  padding: 40px;
}
.container {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 1200px;
}
.container .card {
  position: relative;
  width: 300px;
  padding: 20px;
  margin: 20px;
  background: white;
}
.container .card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border: 20px solid transparent;
  border-top: 20px solid teal;
  border-right: 20px solid teal;
}
.container .card.active::before {
  border-top: 20px solid purple;
  border-right: 20px solid purple;
}
.container .card .content {
  position: relative;
  height: 215px;
  overflow: hidden;
}
.container .card.active .content {
  height: auto;
}
.container .card .content::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(transparent, white);
}
.container .card.active .content::before {
  display: none;
}
.container .card .content h3 {
  font-size: 1.6rem;
  margin-bottom: 1.2rem;
}
.container .card .more {
  position: relative;
  padding: 10px 15px;
  background: teal;
  margin-top: 15px;
  display: inline-block;
  cursor: pointer;
  text-transform: uppercase;
  color: white;
  font-weight: 500;
  letter-spacing: 2px;
  font-size: .8rem;
}
.container .card.active .more {
  background: purple;
}
.container .card .more::before {
  content: "Read more";
}
.container .card.active .more::before {
  content: 'Read Less';
}

<!-- Credit for this code goes to "Online Tutorials" on YouTube. Check out the tutorial "How To Create a Read More Read Less Button using Javascript | Multiple Boxes with Read more function" at:
https://youtu.be/2wQxF7gTcFo -->

<div class="container">
  <div class="card">
    <div class="content">
      <h3>Heading</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <a class="more"></a>
  </div>
  <div class="card">
    <div class="content">
      <h3>Heading</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <a class="more"></a>
  </div>
  <div class="card">
    <div class="content">
      <h3>Heading</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <a class="more"></a>
  </div>
</div>

​