Подскажите как сократить мой Код JavaScript

Question

Каким образом я могу сократить мой код без помощи JQuery и Bootstrap

function Clicked(num) {
  var text = document.body.querySelectorAll('.text');

  if (num === 1) {
    text[0].toggleAttribute("hidden");
    text[1].toggleAttribute("hidden");
  }
  if (num === 2) {
    text[2].toggleAttribute("hidden");
    text[3].toggleAttribute("hidden");
  }
  if (num === 3) {
    text[4].toggleAttribute("hidden");
    text[5].toggleAttribute("hidden");
  }
}

* {
  font-weight: 900;
  font-size: 20px;
}

[hidden] {
  display: none;
}

button {
  width: 200px;
  height: 35px;
}

.text {
  color: #f00;
}

<div class="group">
  <p class="text">первый текст</p>
  <p class="text">первая кнопка</p>
  <button data-index="1" onclick="Clicked(1)">Жми 1</button>
</div>
<div class="group">
  <p class="text">второй текст</p>
  <p class="text">вторая кнопка</p>
  <button data-index="2" onclick="Clicked(2)">Жми 2</button>
</div>
<div class="group">
  <p class="text">третий текст</p>
  <p class="text">третья кнопка</p>
  <button data-index="3" onclick="Clicked(3)">Жми 3</button>
</div>

Спасибо за помощь.

Answer 1

function Clicked(target) {
  target.closest('.group')?.querySelectorAll('.text')
    .forEach(el => el.toggleAttribute("hidden"));
}

* {
  font-weight: 900;
  font-size: 20px;
}

[hidden] {
  display: none;
}

button {
  width: 200px;
  height: 35px;
}

.text {
  color: #f00;
}

<div class="group">
  <p class="text">первый текст</p>
  <p class="text">первая кнопка</p>
  <button data-index="1" onclick="Clicked(this)">Жми 1</button>
</div>
<div class="group">
  <p class="text">второй текст</p>
  <p class="text">вторая кнопка</p>
  <button data-index="2" onclick="Clicked(this)">Жми 2</button>
</div>
<div class="group">
  <p class="text">третий текст</p>
  <p class="text">третья кнопка</p>
  <button data-index="3" onclick="Clicked(this)">Жми 3</button>
</div>

<div class="group">
  <p class="text">4 текст</p>
  <p class="text">4 кнопка</p>
  <button data-index="3" onclick="Clicked(this)">Жми 4</button>
</div>

БЛОГ НА HUSL

Подскажите как сократить мой Код JavaScript

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