对JQuery选择器得到的一组元素的操作问题

Question

我想要做这样一个效果：当鼠标进入一个div D1时，会有一个button d1变灰色，离开时，d1变黑色，点击时变白色且固定不变，直到点击D2~D5；原来想一个一个动画慢慢写，后来了解到JQuery选择器，惊为天人，但使用时没反应，求诸位大神帮忙看看我的写法出了什么问题。

var m1=$(".menu_li");
var m2=$(".menu_li input");
var mc=new Array(5);
 for(var i=0;i<5;i++){
        mc[i]=false;
        m1.eq(i).bind("mouseenter",function(){
            if(!mc[i]){
                m2.eq(i).css("background","#869B74")
            }
        });
        m1.eq(i).bind("mouseleave",function(){
            if(!mc[i]){
                m2.eq(i).css("background","#000000")
            }
        )};
        m1.eq(i).bind("click",function(){
            for(var j=0;j<5;j++){
                m2.eq(j).css("background","#000000");
                mc[j]=false;
            }
            m2.eq(i).css("background","#FFFFFF");
            mc[i]=true;
        });

Answer 1

你dom结构呢？通过样式来控制，除了click外不要直接操作style

 <style>
div{border:solid 1px #999;margin-bottom:10px;padding:10px}
div.on button{background:#aaa}
div.off button{background:#000;color:#fff} 
</style>
<script>
    for (var i = 1; i < 6; i++) document.write('<div><button type="button">button' + i + '</button></div>')
</script>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
<script>
    var divs = $('div')
        .mouseenter(function () { $(this).removeClass('off').addClass('on') })
        .mouseleave(function () { $(this).removeClass('on').addClass('off') })
        .on('click', 'button', function () {
            divs.find('button').prop('style', ''); this.style.cssText = 'background:#fff;color:#000'
        });
</script>