我想要做这样一个效果:当鼠标进入一个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;
});
你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>
click事件包括mouseenter,mouseleave
<br> div{border:solid 1px #999;margin-bottom:10px;padding:10px}<br> div.on button{background:#aaa}<br> div.off button{background:#000;color:#fff} <br>