javascript - 無効化ボタン html5/css/javascript を有効にする

Question

電卓を作りました。以下のページにアップしました。

www.vipulshree.com

ボタンをクリックすると強調表示され、別のボタンがクリックされたときに強調表示が解除されます。次のボタンをクリックすると、色/無効化/強調表示が変わり、前のボタンが通常に戻ります。これについてネット全体を検索しましたが、何も見つかりませんでした。必死で助けて。

ありがとうございました。

Answer 1

:focusCSS 疑似セレクターを使用します。現在フォーカスされている要素と一致します。 ボタンでは機能しないようです

---

JavaScript を使用して.focused、クリック時にクラスを追加し、他のすべての要素でそれを削除します。すべてのボタンの共通の親でイベント委任を使用します (このコードでは、 であると想定されています#container)。

<script type="text/javascript">
    setFocus = function(e) {
        if (document.getElementsByClassName('focus')[0]) document.getElementsByClassName('focus')[0].className = '';
        if (e.target.tagName.toLowerCase() == 'button') {
            e.target.className = 'focus';
        }
    };
    document
       .getElementById('container')
        .onclick = setFocus;
</script>

私の HTML マークアップは次のようになりました。

<div id="container">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
</div>

実施例

Answer 2

ボタンのクラスを定義し、クリックイベントを使用して色を変更できます。ボタンをクリックすると、「前」という変数に保存されます。

したがって、他のボタンをクリックすると、保存されたボタン変数の色が再び変更され、現在のボタンがその変数に割り当てられます。

var previous;
document.getElementsByClassName("className").onclick = function (){
    // change the color of the previous element
    previous = this;
    // change the color of this button
}

Answer 3

これは小さな jsfiddle の動作例です。dom Ready ローダーのみに jQuery を使用し、ハイライト効果を行う CSS クラスを使用しています。

http://jsfiddle.net/t6bJ3/

    var buttons = document.getElementsByTagName('button'),
        buttonsLength = buttons.length,
        selected, 
        i = 0, 
        reset = function() {
            for (i = 0; i < buttonsLength; i++) buttons[i].className = '';
        },
        highlight = function(ev) {
            reset();
            ev.target.className = 'highlight';
        };

    for (; i < buttonsLength; i++) buttons[i].onclick = highlight;