Question

我有一组按钮。我希望当我在其中一个按钮上鼠标按下时，该特定按钮将改变其背面颜色，而所有其他按钮将保持不变。

如何在没有任何回复的情况下提供任何帮助。

Answer 1

<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/

Answer 2

这是一个相当笨重的方法：

<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”的表单的子项，并且存在具有适当颜色的“selected”类 - 显然，您将根据您的标记修改它。

请注意，上面应该在onload处理程序中，或者脚本块应该位于源代码中的元素之后。

另请注意，onclick比onmouseup更合适。

在鼠标向上更改按钮

2 个答案: