1

クリックすると、クリックされた要素のクラスを変更して、現在選択されているボタンであることをユーザーに明らかにするjavascriptとcssを使用してボタンを作成しようとしています。

ページには 4 つのボタンがあります。私はまだ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;
}

次の 2 つの関数呼び出しは実質的に同等です。

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

私が抱えている2つの問題：

1) 目的のクラスをパラメーターとして正規表現に挿入する方法がわかりません。

2) for ループ内の非常に長いメソッドがエラーを引き起こしています。for ループ内のメソッドを次のように置き換えても同じエラーが発生するため、エラーは持続しているようです。

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

このスレッドに基づいた大まかなコード: 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 に答える