尝试在单张卡上使用相同的功能

Question

我有这 3 张卡片，其中隐藏了正文的主体。 我希望能够单击每个单独的按钮并显示该卡的详细信息。 但每次我让 JavaScript 工作时，每个按钮只会打开第一张卡片的隐藏文本。 我通过设置最大高度来隐藏文本，以便我可以在高度上使用过渡。

任何帮助，将不胜感激

 var cardBtns = document.querySelectorAll('.cardBtn'); var cardDetails = document.querySelectorAll(".card-details"); cardBtns.forEach(function(cardBtn) { cardBtn.addEventListener('click', function() { cardDetails.classList.toggle('card-open'); }); });

 <div class="container"> <div class="card1" id="card"> <div class="card-details"> <div class="card-heading"> <h3>Heading</h3> <button class="cardBtn">show more</button> </div> <div class="card-body"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p> </div> </div> </div> <div class="card2" id="card"> <div class="card-details"> <div class="card-heading"> <h3>Heading</h3> <button class="cardBtn">show more</button> </div> <div class="card-body"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p> </div> </div> </div> <div class="card3" id="card"> <div class="card-details"> <div class="card-heading"> <h3>Heading</h3> **<button class="cardBtn">show more</button>** </div> <div class="card-body"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p> </div> </div> </div> </div>

我觉得 JavaScript 是错误的，我尝试了很多替代方法

Answer 1

你很接近：

var cardBtns = document.querySelectorAll('.cardBtn');
var cardDetails = document.querySelectorAll(".card-details");

cardBtns.forEach(function (cardBtn, index) {
  cardBtn.addEventListener('click', function(){
    cardDetails[index].classList.toggle('card-open');
  });

});

问题出在事件处理程序内部，因为通过调用cardDetails处理一组元素，而不仅仅是一个元素。

Answer 2

您拥有 id='card' 的所有 3 个，所以我将其设置为一个类。

您可以通过捕获事件 (e) 并找到最接近的“卡片”类，然后通过 querySelector 找到关联的“卡片主体”来找到相关的“卡片详细信息”的方法

过渡是 css 规则，使用 height 的方法是使用max-height - 将“打开”最大高度设置为大于实际高度。

 var cardBtns = document.querySelectorAll('.cardBtn'); var cardDetails = document.querySelectorAll(".card-details"); window.addEventListener('load', () => { cardBtns.forEach(cardBtn => { cardBtn.addEventListener('click', e => { e.target.closest('.card').querySelector('.card-body').classList.toggle('card-open'); }); }); });

 .card {} .card-body { max-height: 0; transition: all .5s ease-in; overflow: hidden; padding: 15px; } .card-body.card-open { max-height: 200px; }

 <div class="card1 card"> <div class="card-details"> <div class="card-heading"> <h3>Heading</h3> <button class="cardBtn">show more</button> </div> <div class="card-body"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p> </div> </div> </div> <div class="card2 card"> <div class="card-details"> <div class="card-heading"> <h3>Heading</h3> <button class="cardBtn">show more</button> </div> <div class="card-body"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p> </div> </div> </div> <div class="card3 card"> <div class="card-details"> <div class="card-heading"> <h3>Heading</h3> **<button class="cardBtn">show more</button>** </div> <div class="card-body"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p> </div> </div> </div>

Answer 3

这是正确的方法：

 <div class="card1" id="card"> <div class="card-details"> <div class="card-heading"> <h3>Heading</h3> <button class="cardBtn">show more</button> </div> <div class="card-body d-none"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p> </div> </div> </div> <div class="card2" id="card"> <div class="card-details"> <div class="card-heading"> <h3>Heading</h3> <button class="cardBtn">show more</button> </div> <div class="card-body d-none"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p> </div> </div> </div> <div class="card3" id="card"> <div class="card-details"> <div class="card-heading"> <h3>Heading</h3> <button class="cardBtn">show more</button> </div> <div class="card-body d-none"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p> </div> </div> </div> <script> var cardBtns = document.querySelectorAll('.cardBtn'); cardBtns.forEach(function(cardBtn) { cardBtn.addEventListener('click', function() { let cardDetails = cardBtn.closest('.card-details'); let cardBody = cardDetails.getElementsByClassName('card-body')[0]; if (cardBody.classList.contains('d-none')) { cardBody.classList.remove('d-none'); cardBody.classList.add('d-block'); cardBtn.textContent = 'Show Less'; } else { cardBody.classList.remove('d-block'); cardBody.classList.add('d-none'); cardBtn.textContent = 'Show more'; } }); }); </script> <style> .d-none { display: none; } .d-block { display: block; } </style>

JS小提琴演示： https : //jsfiddle.net/5sqkdp0x/

Answer 4

我只想为整个页面添加一个事件侦听器。 我不知道你最终会拥有多少张卡片，但如果你有 10.000 张卡片，将它们全部添加将需要时间。

此外，元素上的 id 应该是唯一的，因此删除所有出现的id="card"因为它们几乎没有任何作用。

 window.addEventListener('click', function(event) { let element = event.target; if (element.classList.contains('cardBtn')) { let cardHeadingEl = element.parentNode; let cardDetailsEl = cardHeadingEl.parentNode; cardDetailsEl.classList.toggle('open'); } });

 .card-body { opacity: 0; max-height: 0; overflow: hidden; transition: opacity 300ms, max-height 400ms; transition-timing-function: ease-out; } .card-details.open > .card-body { max-height: 200px; opacity: 1; }

 <div class="container"> <div class="card1" id="card"> <div class="card-details"> <div class="card-heading"> <h3>Heading</h3> <button class="cardBtn">show more</button> </div> <div class="card-body"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p> </div> </div> </div> <div class="card2" id="card"> <div class="card-details"> <div class="card-heading"> <h3>Heading</h3> <button class="cardBtn">show more</button> </div> <div class="card-body"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p> </div> </div> </div> <div class="card3" id="card"> <div class="card-details"> <div class="card-heading"> <h3>Heading</h3> **<button class="cardBtn">show more</button>** </div> <div class="card-body"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p> </div> </div> </div> </div>