优先排序jquery函数以覆盖另一个
优先排序jquery函数以覆盖另一个
提问于 2014-05-21 18:38:56
使用jQuery，我试图在搜索菜单按钮中编写2种不同类型的反馈。问题是，这两个代码需要相互冲突的代码：
首先，当鼠标进入红色按钮时，将其更改为不同的颜色(蓝色)，然后在鼠标离开时将其更改为原来的颜色(红色)，从而显示红色按钮是“可点击的”：
$('.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命令进行优先排序吗？我还应该用另外一个函数吗？提前谢谢你！
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-05-21 18:56:50
您应该使用类而不是.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/
Stack Overflow用户
发布于 2014-05-21 19:05:36
我建议使用css类来实现这一点。
工作实例
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>Stack Overflow用户
发布于 2014-05-21 18:56:58
给按下的按钮一个id，然后在mouseleave上检查该id。
这里是一个小提琴
$('.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");
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23791281
复制相关文章
相似问题
腾讯云开发者
