Прошу помочь с функцией classList

Question

есть функция, которая должна выполнять, добавление и исчезновение кнопок, когда я нажимаю на любые кнопки из трех, они должны исчезнуть, вместо них должны появиться другие, которые изначально скрыты, но у меня проблема, когда нажимаю на них они сразу исчезают, они должны не исчезнуть пока я не нажму на кнопку назад, прошу помочь вот код

var btn = document.querySelectorAll('.btn')
var sub = document.querySelectorAll('.sub')
var back = document.querySelector('.back')



for (var i = 0; i < btn.length; i++) {
	btn[i].addEventListener('click', function() {
  	for(var x = 0; x < sub.length; x++) {
    	btn[x].classList.add('hidden') }
    var item = this.dataset.product
    for(var x = 0; x < sub.length; x++) {
    	sub[x].classList.add('hidden')
    	if (sub[x].dataset.id == item) {
      	sub[x].classList.remove('hidden')
      }
    }
  })
}

back.addEventListener('click', function() {
  for(var x = 0; x < btn.length; x++) {
    	btn[x].classList.remove('hidden')
  }
  for(var i = 0; i < sub.length; i++) {
    	sub[i].classList.add('hidden')
  }
  
  
  
})

.btn {
  height: 50px;
  width: 50px;
  background-color: #f2f2f2;
  margin: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  cursor: pointer;
  border: 1px solid #ccc;
}

.hidden {
  display: none;
}

<a class="btn" data-product="a">a</a>
<a class="btn" data-product="b">b</a>
<a class="btn" data-product="c">c</a>


<a class="sub btn hidden" data-id="a">aaa</a>
<a class="sub btn hidden" data-id="a">aaa</a>
<a class="sub btn hidden" data-id="a">aaa</a>

<a class="sub btn hidden" data-id="b">bbb</a>
<a class="sub btn hidden" data-id="b">bbb</a>
<a class="sub btn hidden" data-id="b">bbb</a>

<a class="sub btn hidden" data-id="c">ccc</a>
<a class="sub btn hidden" data-id="c">ccc</a>
<a class="sub btn hidden" data-id="c">ccc</a>


<a class="btn back" data-id="back">back</a>

Answer 1

Все решил проблему.

var btn = document.querySelectorAll('.cat')
var sub = document.querySelectorAll('.sub')
var back = document.querySelector('.back')

for (var i = 0; i < btn.length; i++) {
  btn[i].addEventListener('click', function() {
    var item = this.dataset.product

    for (var i = 0; i < btn.length; i++) {
      btn[i].classList.add('hidden')
    }

    for (var i = 0; i < sub.length; i++) {
      if (sub[i].dataset.id == item) {
        sub[i].classList.remove('hidden')
        back.classList.remove('hidden')
      }
    }

  })
}

back.addEventListener('click', function() {

  for (var x = 0; x < btn.length; x++) {
    btn[x].classList.remove('hidden')
    back.classList.add('hidden')
  }

  for (var i = 0; i < sub.length; i++) {
    sub[i].classList.add('hidden')
  }

})

.btn {
  height: 50px;
  width: 50px;
  background-color: #f2f2f2;
  margin: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  cursor: pointer;
  border: 1px solid #ccc;
}

.hidden {
  display: none;
}

<a class="cat btn" data-product="a">a</a>
<a class="cat btn" data-product="b">b</a>
<a class="cat btn" data-product="c">c</a>

<a class="sub btn hidden" data-id="a">aaa</a>
<a class="sub btn hidden" data-id="a">aaa</a>
<a class="sub btn hidden" data-id="a">aaa</a>

<a class="sub btn hidden" data-id="b">bbb</a>
<a class="sub btn hidden" data-id="b">bbb</a>
<a class="sub btn hidden" data-id="b">bbb</a>

<a class="sub btn hidden" data-id="c">ccc</a>
<a class="sub btn hidden" data-id="c">ccc</a>
<a class="sub btn hidden" data-id="c">ccc</a>

<a class="btn back hidden" data-id="back">back</a>

БЛОГ НА HUSL

Прошу помочь с функцией classList

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