on mouse up changeボタン

Question

私は一連のボタンを持っています。ボタンの1つでマウスを上げると、その特定のボタンは背面の色を変え、他のボタンは同じままにしておきたい。

どのようなポストバックなしでそれを行うにはどんな助け？

Answer 1

ここでそれを行うにはかなり不格好な方法です：

<style> 
.selected { background-color : red; } 
</style> 
<script> 
var theForm = document.getElementById("someForm"); 
theForm.onmouseup = function(e) { 
    // allow for IE 
    if (!e) e = window.event; 

    var src = e.srcElement || e.target; 

    if (src.tagName.toLowerCase() === "input" 
     && src.type.toLowerCase() === "button"){ 
     src.className = "selected"; 
     for (var i = 0; i < theForm.children.length; i++) 
      if (src != theForm.children[i]) 
       theForm.children[i].className = ""; 
    }    
}; 
</script> 

デモ：http://jsfiddle.net/Yn3pT/

これは、ボタンが「someForm」と呼ばれる形式の子であると仮定し、「選択」クラスは、それが適切な色を持って存在する - 明らかにあなたは、あなたに合わせて、必要に応じてこれを修正しますマークアップ。

上記は、onloadハンドラ内にあるか、またはスクリプトブロックがソース内の要素の後ろのどこかにある必要があることに注意してください。

さらに、onclickがonmouseupよりはるかに適切であることに注意してください。

Answer 2

<button class="mouseup"> Click me </button> 
<button class="mouseup"> Click me </button> 
<button class="mouseup"> Click me </button> 

$buttons = document.getElementsByClassName('mouseup'); 

for(var i = 0; i < $buttons.length; i++) 
{ 
    $buttons[i].onmouseup= function(){ 
     this.style.background = 'blue'; 
     for(var j = 0; j < $buttons.length; j++) 
      if($buttons[j] != this) 
       $buttons[j].style.background = '#F0F0F0'; 
    } 
} 

http://jsfiddle.net/nQHup/5/