用jquery动态改变背景颜色 [英] Changing background color dynamically with jquery
本文介绍了用jquery动态改变背景颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
现在，我的页面有一部分包含对象列表。当您将鼠标悬停在它们上方时，背景变成浅黄色，并在您停用时返回白色。当条件满足时，我希望其中一个对象转为绿色背景，如果不满足，则返回正常状态。
我遇到过这样的问题：如果满足条件，它会改变颜色，如果不是，我会将其设置回白色。但现在淡黄色的鼠标悬停不起作用。其余的变成黄色，但其中一部分保持白色。我不知道如何撤消我的绿色变化，以保持鼠标悬停/鼠标悬停正常工作。任何帮助？这是我的代码。
if（$ myID.text（）=== schedule.content（）。myId）{
$ myID .css（background-color，＃AEAF93）;
$ stn.css（background-color，＃AEAF93）;
$ miles.css（background-color，＃AEAF93）;
$ worktag.css（background-color，＃AEAF93）;
} else {
$ myID.css（background-color，#FFFFFF）;
$ stn.css（background-color，#FFFFFF）;
$ miles.css（background-color，#FFFFFF）;
$ worktag.css（background-color，#FFFFFF）; $（'＃chevron'）。on（'click'，function（）{
if（$ myID.text（
$ b $ ）=== schedule.content（）。myId）{
$ myID.css（background-color，＃AEAF93）;
$ stn.css（background-颜色，＃AEAF93）;
$ miles.css（background-color，＃AEAF93）;
$ worktag.css（background-color，＃AEAF93） ;
} else {
$ myID.css（background-color，#FFFFFF）;
$ stn.css（background-color，#FFFFFF）;
$ miles.css（background-color，#FFFFFF）;
$ worktag.css（background-color，#FFFFFF）;
}
}）;
$ sideBar.find（'。myList'）。bind（mouseover，function（）{
var color = $（this）.css（background-color）; $ b $（this）.css（background，#fffccc）;
$（this）.bind（mouseout，function（）{
$（this）.css （background，#fff）;
}）;
}）;
解决方案
终于找到了我对此的回答。
CSS
.highlightedClass {
background-color：＃AEAF93;
$ / code> JAVASCRIPT
<$ p如果条件
if（$ td_ID.text（）=== schedule.content（）。idInFirstColumn）{
$ 2nd_tr.addClass（highlightedClass），$ p>
;
} else {
if（$ 2nd_tr.hasClass（highlightedClass））{
$ 2nd_tr.removeClass（highlightedClass）; $（'＃viewResultsButton'）。on（'click'，function（）{
if（$ td_ID.text（）=='
$' = schedule.content（）.idInFirstColumn）{
$ 2nd_tr.addClass（highlightedClass）;
} else {
if（$ 2nd_tr.hasClass（highlightedClass））{
$ 2nd_tr.removeClass（highlightedClass）;
}
}
}）;
// else else
if（$ td_ID.text（）=== schedule.content（）。idInFirstColumn）{
$ tr.addClass（ highlightedClass）;
} else {
if（$ tr.hasClass（highlightedClass））{
$ tr.removeClass（highlightedClass）;
}
}
//在巨大的if / else / for循环混乱之外。 （'click'，function（）{
var flag = false;
$（'＃alteratePlan> tbody> tr '）.each（function（）{
$ td_ID = $（this）.find（'。td_id'）;
if（$ td_ID.text（）===''）{
if（flag === true）{
$（this）.addClass（highlightedClass）;
flag = true;
}
} else {$ b $如果（$ td_ID.text（）=== schedule.content（）。idInFirstColumn）{
if（$（this）.hasClass（highlightedClass））{
flag = true;
$ else {
$（this）.addClass（highlightedClass）;
flag = true;
}
} else {
flag = false;
if（$（this）.hasClass（highlightedClass））{
$（this）.removeClass（ highlightClass）;
}
}
}
}）;
}）;
Right now there is a part of my page that has a list of objects. When you hover over them, the background turns a light yellow color and return to white when you mouseout. I want one of the objects to turn to a green background when a condition is met, and then go back to normal if it isn't met.
I have this happening with one issue: if the condition is met, it changes colors, and if it isn't I have it setting back to white. But now the light yellow mouseover won't work. The rest turns yellow but that one part stays white. I don't know how to "undo" my green color change in order to keep the mouseover/mouseout working correctly. Any help? Here is my code.
if($myID.text() === schedule.content().myId){
$myID.css("background-color", "#AEAF93");
$stn.css("background-color", "#AEAF93");
$miles.css("background-color", "#AEAF93");
$worktag.css("background-color", "#AEAF93");
}else{
$myID.css("background-color", "#FFFFFF");
$stn.css("background-color", "#FFFFFF");
$miles.css("background-color", "#FFFFFF");
$worktag.css("background-color", "#FFFFFF");
}
$('#chevron').on('click', function() {
if($myID.text() === schedule.content().myId){
$myID.css("background-color", "#AEAF93");
$stn.css("background-color", "#AEAF93");
$miles.css("background-color", "#AEAF93");
$worktag.css("background-color", "#AEAF93");
}else{
$myID.css("background-color", "#FFFFFF");
$stn.css("background-color", "#FFFFFF");
$miles.css("background-color", "#FFFFFF");
$worktag.css("background-color", "#FFFFFF");
}
});
$sideBar.find('.myList').bind("mouseover", function(){
var color = $(this).css("background-color");
$(this).css("background", "#fffccc");
$(this).bind("mouseout", function(){
$(this).css("background", "#fff");
});
});
解决方案
Finally found my answer to this.
CSS
.highlightedClass{
background-color: #AEAF93;
}
JAVASCRIPT
//if condition
if($td_ID.text() === schedule.content().idInFirstColumn){
$2nd_tr.addClass("highlightedClass");
}else{
if($2nd_tr.hasClass("highlightedClass")){
$2nd_tr.removeClass("highlightedClass");
}
}
$('#viewResultsButton').on('click', function(){
if($td_ID.text() === schedule.content().idInFirstColumn){
$2nd_tr.addClass("highlightedClass");
}else{
if($2nd_tr.hasClass("highlightedClass")){
$2nd_tr.removeClass("highlightedClass");
}
}
});
//else condition
if($td_ID.text() === schedule.content().idInFirstColumn){
$tr.addClass("highlightedClass");
}else{
if($tr.hasClass("highlightedClass")){
$tr.removeClass("highlightedClass");
}
}
//outside of huge if/else/for loop mess.
$('#viewResultsButton').on('click', function(){
var flag= false;
$('#alteratePlan > tbody > tr').each(function() {
$td_ID = $(this).find('.td_id');
if($td_ID.text() === ''){
if(flag === true){
$(this).addClass("highlightedClass");
flag= true;
}
}else{
if($td_ID.text() === schedule.content().idInFirstColumn){
if($(this).hasClass("highlightedClass")){
flag= true;
}else{
$(this).addClass("highlightedClass");
flag= true;
}
}else{
flag= false;
if($(this).hasClass("highlightedClass")){
$(this).removeClass("highlightedClass");
}
}
}
});
});
这篇关于用jquery动态改变背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
