嘗試在單張卡上使用相同的功能

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>