Javascript 用于更改标记类的调试方法

我正在尝试使用javascript和css制作一个按钮，当单击该按钮时，将更改单击元素的类，以便用户清楚地看到它是当前选中的按钮

页面上有四个按钮。我还没有实现第四个。 蛮力代码（show after）正在运行

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;
}

但我有两个问题：

1） 我不知道如何将所需的类作为参数插入正则表达式中

2） for循环中非常长的方法导致错误。该错误似乎是持久性的，因为即使用以下内容替换for循环中的方法，我也会收到相同的错误：

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

代码松散地基于此线程：

---

将事件侦听器添加到根节点并跟踪实际目标

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

使用新的正则表达式（字符串）

reg=new Regex（'？：^ |\s）+所需的类+'（？！\s））

循环从0开始，但按钮名称从1开始
for（i=1；i

正如他们所说，其余部分留给读者作为练习
您也可以使用
element.classList.remove（'selected'）
document.addEventListener('click', function(event){
     var old = document.querySelector(".selected");
     old.className = old.className.replace( /(?:^|\s)selected(?!\S)/ , '' );
     event.target.className += " selected";
}, false);