Как при нажатии кнопки открыть блок, относящийся к этой кнопке

Question

Есть карточки, в них кнопка "детали". Как при нажатии на кнопку открыть лишь блок относящийся к определенной кнопке в этой карточке?

let toggleA = document.querySelectorAll(".card_button");

let detailCard = document.querySelectorAll(".card_text");

function openCloseDetails() {
  if (a == 0) {

    detailCard.style.display = "block";
    return (a = 1);
  } else {
    detailCard.style.display = "none";

    return (a = 0);
  }
};

toggleA.addEventListener("click", openCloseDetails);

.card {
    margin-bottom: 15px;
   border:2px solid black;
    border-radius: 15px;

         display: flex;
         flex-direction: column;
         justify-content: space-between;
         padding: 10px;
}

.card_button {
    width: 90px;
    border: 1px solid black;
    border-radius: 10px;
    display: block;
    margin: 5px;
    margin-left: auto;
    padding: 5px 10px;
    text-decoration: none; */
    color: #000;
}

.card_button:hover {
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    background: linear-gradient(to bottom, #fcfff4, #e9e9ce);
    }

<div class="wrapper">
  <div class="card">
    this any card
    <a href="#" class="card_button">Детали</a>
    <div class="card_text" style="display: none">text for first card</div>
  </div>
  <div class="card">
    this any card
    <a href="#" class="card_button">Детали</a>
    <div class="card_text" style="display: none">text for second card</div>
  </div>
  <div class="card">
    this any card
    <a href="#" class="card_button">Детали</a>
    <div class="card_text" style="display: none">text for third card</div>
  </div>
  <div class="card">
    this any card
    <a href="#" class="card_button">Детали</a>
    <div class="card_text" style="display: none">text for fourth card</div>
  </div>
  </div

Не срабатывает, так как в toggleA массив кнопок. Понимаю, что нужно поменять стиль именно у того номера массива которая была нажата. Не понимаю как это сделать... Подскажите пожалуйста!

Answer 1

Можно использовать делегирование событий, чтобы не вешать слушатель на каждую кнопку. https://learn.javascript.ru/event-delegation

Также можно для удобства использовать атрибут hidden (https://developer.mozilla.org/ru/docs/Web/API/HTMLElement/hidden). И при нажатии инвертировать его значение - показать/скрыть.

Код ниже:

function openCloseDetails(event) {
  if (event.target.classList.contains('card_button')){  
    let card_text = event.target.closest('.card').querySelector('.card_text');
    card_text.hidden = !card_text.hidden;
  }
};

document.querySelector('.wrapper').addEventListener("click", openCloseDetails);

.card {
    margin-bottom: 15px;
   border:2px solid black;
    border-radius: 15px;

         display: flex;
         flex-direction: column;
         justify-content: space-between;
         padding: 10px;
}

.card_button {
    width: 90px;
    border: 1px solid black;
    border-radius: 10px;
    display: block;
    margin: 5px;
    margin-left: auto;
    padding: 5px 10px;
    text-decoration: none; */
    color: #000;
}

.card_button:hover {
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    background: linear-gradient(to bottom, #fcfff4, #e9e9ce);
    }

<div class="wrapper">

<div class="wrapper">
  <div class="card">
    this any card
    <a href="#" class="card_button">Детали</a>
    <div class="card_text" hidden>text for first card</div>
  </div>
  <div class="card">
    this any card
    <a href="#" class="card_button">Детали</a>
    <div class="card_text" hidden >text for second card</div>
  </div>
  <div class="card">
    this any card
    <a href="#" class="card_button">Детали</a>
    <div class="card_text" hidden>text for third card</div>
  </div>
  <div class="card">
    this any card
    <a href="#" class="card_button">Детали</a>
    <div class="card_text" hidden>text for fourth card</div>
  </div>
  </div>

БЛОГ НА HUSL

Как при нажатии кнопки открыть блок, относящийся к этой кнопке

Ответы (1 шт):