优先jQuery功能重写另一

使用jQuery，我试图编程搜索菜单按钮内的2种不同类型的反馈。问题是2需要冲突的代码：优先jQuery功能重写另一

首先，显示红色按钮是“可点击”的，当鼠标进入时将其改变为不同的颜色（蓝色），然后将其更改回原始颜色（红色）当鼠标离开它：

$('.buttons').mouseenter(function() { 
    $(this).css("background-color", "blue"); 
}); 
$('.buttons').mouseleave(function() { 
    $(this).css("background-color", "red"); 
});

其次，表明某个按钮被“点击”通过改变按钮，可将第三颜色（黄色）。我希望按钮保持黄色，直到点击新的/不同的按钮。发生这种情况时，我希望新点击的按钮变为黄色，其他所有按钮恢复为原始颜色（红色）。

$(".buttons").click(function() { 
$(".buttons").css("background-color", "red"); 
$(this).css("background-color", "yellow"); 
});

这一切都很好地工作，直到鼠标离开点击按钮移动到另一个。发生这种情况时，mouseleave将黄色按钮变回红色。

有没有一种方法来优先考虑jQuery命令？我应该使用另一个函数吗？非常感谢！

来源

2014-05-21 katestrykermcm

是不是有一个原因，你不能用CSS做到这一点，只是点击事件添加一个类来改变颜色黄色？ – Ballbin

您应该使用类而不是.css()函数。它更简单。使用这样的事情：

$('.buttons').hover(function(){ 
    $(this).toggleClass('hover'); 
}).on('click', function(){ 
    $('.buttons').removeClass('click').filter(this).addClass('click'); 
})

有了这些CSS：

.buttons{ 
    background-color : red; 
} 

/* 
Could also be .buttons:hover an then remove the JS 
Much more efficient 
*/ 
.buttons.hover{ 
    background-color : blue; 
} 

.buttons.click{ 
    background-color : yellow; 
}

小提琴：http://jsfiddle.net/Re9bj/12/

来源

2014-05-21 18:56:50

感谢您的帮助！这个缺点是即使点击一个新按钮，点击按钮仍保持黄色。我只想最近点击的按钮保持黄色。 – katestrykermcm

错过了您的问题中的这一点，修复它。 –

效果很好。谢谢！ – katestrykermcm

给点击的按钮的ID，然后检查ID在鼠标离开

继承人jsfiddle

$('.buttons').mouseenter(function() { 
    $(this).css("background-color", "blue"); 
}); 
$('.buttons').mouseleave(function() { 
    if ($(this).attr("id") == "clicked") { 
     $(this).css("background-color", "yellow"); 
    } else { 
     $(this).css("background-color", "red"); 
    } 
}); 

$(".buttons").click(function() { 
    $(".buttons").css("background-color", "red"); 
    $(".buttons").attr("id",""); 
    $(this).css("background-color", "yellow"); 
    $(this).attr("id","clicked"); 
});

来源

2014-05-21 18:56:58

谢谢！我很高兴能够更多地了解jQuery的可能性。不过，由于其他人的评论，我认为我将改用CSS来提高效率。 – katestrykermcm

@ user3064186不用担心:) –

我会建议使用CSS类来实现这一点。

Working example

CSS：

.buttons { 
    background-color: red; 
} 
.buttons:hover { 
    background-color: blue; 
} 
.clicked { 
background-color: yellow !important; 
}

的Javascript：

var $buttons = $('.buttons') 
$buttons.click(function() { 
    $buttons.removeClass('clicked'); 
    $(this).addClass('clicked'); 
});

HTML：

<button class='buttons'>Button 1 </button> 
<button class='buttons'>Button 2 </button> 
<button class='buttons'>Button 3 </button> 
<button class='buttons'>Button 4 </button>

来源

2014-05-21 19:05:36 Jashwant

优先jQuery功能重写另一

回答

相关问题