Метод отладки для изменения класса тега

Question

Я пытаюсь сделать кнопку с javascript и css, которая при щелчке изменит класс элемента с щелчком, чтобы сделать очевидным для пользователя, что это выбранная в данный момент кнопка.

На странице есть четыре кнопки. Я еще не реализовал 4-й. Работает код грубой силы (показ после).

function selected_button(opCode){ 
    switch(opCode){ 
     case 1: 
      document.getElementById('button1').className += "selected"; 
      document.getElementById('button2').className = document.getElementById("button2").className.replace(/(?:^|\s)selected(?!\S)/ , ''); 
      document.getElementById('button3').className = document.getElementById("button3").className.replace(/(?:^|\s)selected(?!\S)/ , ''); 
      document.getElementById('button4').className = document.getElementById("button4").className.replace(/(?:^|\s)selected(?!\S)/ , ''); 
      break; 
     case 2: //Really similar to case 1 but shifted numbers around 
      document.getElementById('button2').className += "selected"; 
      document.getElementById('button1').className = document.getElementById("button1").className.replace(/(?:^|\s)selected(?!\S)/ , ''); 
      document.getElementById('button3').className = document.getElementById("button3").className.replace(/(?:^|\s)selected(?!\S)/ , ''); 
      document.getElementById('button4').className = document.getElementById("button4").className.replace(/(?:^|\s)selected(?!\S)/ , ''); 
      break; 
     default: //really similar to case 1 but shifted numbers around 
      document.getElementById('button3').className += "selected"; 
      document.getElementById('button1').className = document.getElementById("button1").className.replace(/(?:^|\s)selected(?!\S)/ , ''); 
      document.getElementById('button2').className = document.getElementById("button2").className.replace(/(?:^|\s)selected(?!\S)/ , ''); 
      document.getElementById('button4').className = document.getElementById("button3").className.replace(/(?:^|\s)selected(?!\S)/ , ''); 
    } 
} 

Я хочу, чтобы сделать более общую функцию этого так, что я придумал это следующее:

function general_selected(selected_elem_num, num_elem, elem_name, desired_class){ 
    var i = 0; 
    for(i = 0; i < num_elem + 1; i++){ //dehighlights all options 
      document.getElementById(elem_name + i.toString()).className = 
       document.getElementById(elem_name + i.toString()).className.replace 
       (/(?:^|\s) *should be a parameter here* (?!\S)/ , ''); 
       /* code wrapped for readability - above is all one statement */ 
    } 
    //highlights selected option 
    document.getElementById(elem_name + selected_elem_num).className 
       += desired_class; 
} 

Следующие два вызова функции должны быть практически эквивалентны:

selected_button(1); 
general_selected(1, 4, 'button', 'selected'); 

2 проблемы, которые у меня возникают:

1) Я не знаю, как вставить желаемый класс в регулярное выражение в качестве параметра.

2) Очень длинный метод в цикле for вызывает ошибку. Ошибка, кажется, быть стойким, потому что я получаю ту же ошибку, даже если я заменю метод в цикл со следующим:

document.getElementByID(elem_name + i.toString()).className = desired_class; 

код свободно на основе этой теме: Change an element's class with JavaScript

Answer 1

Добавить прослушиватель событий корневой узел и целевой объект.

document.addEventListener('click', function(event){ 
    var old = document.querySelector(".selected"); 
    old.className = old.className.replace(/(?:^|\s)selected(?!\S)/ , ''); 
    event.target.className += " selected"; 
}, false); 

Answer 2

1. Create the regex dynamically используя new Regex(string)

reg = new Regex('?:^|\s)'+desired_class+'(?!\S)');

1. Ваш цикл начинается с 0, но ваши имена кнопок начинается с 1

for(i = 1; i < num_elements + 1 .....

Остальное, как говорится, остается в качестве упражнения для читателя