更改标签类的调试方法

我想用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; 
}

以下两个函数调用应该是几乎相同的：

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

虽然我有两个问题：

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

2）for循环中真正长的方法会导致错误。错误似乎是持久的，因为我得到了同样的错误，甚至当我用下面的替换方法在for循环：

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

代码松散的基础上的主题： Change an element's class with JavaScript

来源

2012-04-12 Zigu

添加事件侦听根节点和跟踪实际目标。

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

来源

2012-04-12 22:44:05 kirilloid

您也可以使用'element.classList.remove（“选择”）' – kirilloid 2012-04-12 22:56:41