Как последовательно менять класс динамически-созданных кнопок js

Рейтинг: 0Ответов: 1Опубликовано: 15.02.2023

Есть потребность последовательно менять класс динамически создаваемых кнопок при нажатии на каждую следующую.

Ожидание: Есть например три(пять, десть) кнопки. Нажимая на каждую следующую, нужно чтобы обе кнопки меняли свой класс: предыдущая становилась "белая", следующая становилась "красная" и.т.д Ожидание 1ожидание 2

Вот, что я на говнокодил (уверен, что есть более крутые решения, но нужно именно так)

let btn_click = document.getElementById('click_me');
btn_click.onclick = function(){
let btn_create = document.getElementById('indata');
let json_in =[
  {
    data_id: 37,
    data_from: 40,
    data_to: 44
  },
  {
    data_id: 38,
    data_from: 45,
    data_to: 49
  },
  {
    data_id: 39,
    data_from: 50,
    data_to: 59
  }
]
let json_data = JSON.stringify(json_in)
btn_create.InnerHTML = '';
let btn_data = JSON.parse(json_data);
for(num in btn_data){
                let dat_but = document.createElement('button');
                dat_but.className = ('offbtn');
                dat_but.id = ('id_'+btn_data[num].data_id);
                dat_but.value = btn_data[num].data_id;
                dat_but.innerHTML += (' ' + btn_data[num].data_from + '-' + btn_data[num].data_to);
btn_create.appendChild(dat_but)
dat_but.onclick = function(){
  //тут меняем класс
if(dat_but.className === 'offbtn'){
  dat_but.className = ('onbtn');
}else{dat_but.className = 'offbtn'}  
}//end onclick
};//end for
};//eof
.onbtn {
  font-family: 'Comfortaa';
  font-size: 15px;
  color: #ffffff !important;
  padding: 15px 25px;
  border-radius: 5px;
  border: 2px solid #ffffff;
  background: #f66d52;
}
.onbtn:hover {
  color: #000000 !important;
  background: #ff512e;
}
.offbtn {
  font-family: 'Comfortaa';
  font-size: 15px;
  color: #000000 !important;
  padding: 15px 25px;
  border-radius: 5px;
  border: 2px solid #000000;
  background: #ffffff;
}
.offbtn:hover {
  color: #000000 !important;
  background: #ff512e;
}
<button class='offbtn' id='click_me'>click me
</button>
<div id='indata'></div>

Класс меняется, но предыдущая нажатая кнопка по прежнему остается гореть, и перестает только по второму клику.

javascript frontend
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Нажимая на каждую следующую, нужно чтобы обе кнопки меняли свой класс: предыдущая становилась "белая", следующая становилась "красная"

Предложу такой вариант...

const ob = document.getElementById('indata')
ob.addEventListener('click', e => {
  const o = e.target
  if (o.tagName != 'BUTTON') return
  ob.querySelectorAll('.onbtn').forEach(o => {
    o.classList.add('offbtn')
    o.classList.remove('onbtn')
  })
  o.classList.remove('offbtn')
  o.classList.add('onbtn')
})

let btn_click = document.getElementById('click_me');
btn_click.onclick = function(){
let btn_create = document.getElementById('indata');
let json_in =[
  {
    data_id: 37,
    data_from: 40,
    data_to: 44
  },
  {
    data_id: 38,
    data_from: 45,
    data_to: 49
  },
  {
    data_id: 39,
    data_from: 50,
    data_to: 59
  }
]
let json_data = JSON.stringify(json_in)
btn_create.InnerHTML = '';
let btn_data = JSON.parse(json_data);
for(num in btn_data){
                let dat_but = document.createElement('button');
                dat_but.className = ('offbtn');
                dat_but.id = ('id_'+btn_data[num].data_id);
                dat_but.value = btn_data[num].data_id;
                dat_but.innerHTML += (' ' + btn_data[num].data_from + '-' + btn_data[num].data_to);
btn_create.appendChild(dat_but)
};//end for
};//eof
.onbtn {
  font-family: 'Comfortaa';
  font-size: 15px;
  color: #ffffff !important;
  padding: 15px 25px;
  border-radius: 5px;
  border: 2px solid #ffffff;
  background: #f66d52;
}
.onbtn:hover {
  color: #000000 !important;
  background: #ff512e;
}
.offbtn {
  font-family: 'Comfortaa';
  font-size: 15px;
  color: #000000 !important;
  padding: 15px 25px;
  border-radius: 5px;
  border: 2px solid #000000;
  background: #ffffff;
}
.offbtn:hover {
  color: #000000 !important;
  background: #ff512e;
}
<button class='offbtn' id='click_me'>click me
</button>
<div id='indata'></div>