1

我正在尝试使用 javascript 和 css 制作一个按钮,当单击该按钮时,它将更改被单击元素的类,以使用户清楚它是当前选定的按钮。

页面上有四个按钮。我还没有实施第四个。蛮力代码(显示后)正在工作。

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 循环中非常长的方法导致错误。该错误似乎是持久的,因为即使我将 for 循环中的方法替换为以下内容,我也会收到相同的错误:

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

基于此线程的代码松散: Change an element's class with JavaScript

4

2 回答 2

0
  1. 使用动态创建正则表达式new Regex(string)

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

  1. 您的循环从 0 开始,但您的按钮名称从 1 开始

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

正如他们所说,其余的留给读者作为练习

于 2012-04-12T22:47:29.700 回答
0

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

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-12T22:44:05.570 回答