使用jquery动态改变背景颜色

Changing background color dynamically with jquery

本文关键字：背景 颜色 改变 动态 jquery 使用      更新时间：2023-09-26

现在我的页面有一个对象列表的一部分。当你把鼠标悬停在它们上面时，背景会变成淡黄色，当你把鼠标移开时，背景会变回白色。我希望其中一个对象在满足条件时变为绿色背景，如果不满足则返回正常。

我有一个问题:如果满足条件，它就改变颜色，如果不满足，我就把它设置回白色。但是现在浅黄色的鼠标悬停不起作用了。其余部分变成黄色，但那一部分保持白色。我不知道如何"撤销"我的绿色变化，以保持鼠标悬停/鼠标移出正常工作。任何帮助吗?这是我的代码。

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");
    });
});

试试这个:

var bg = "#FFFFFF";
if($myID.text() === schedule.content().myId) {
  bg = "#AEAF93";
}
$myID.css("background-color", bg);
$stn.css("background-color", bg);
$miles.css("background-color", bg);
$worktag.css("background-color", bg);
/*
the above can be done in one line :
$("#element1,#element2,#element3,#element4").css("background-color", bg);
*/
$('#chevron').on('click', function() {
  $myID.css("background-color", bg);
  $stn.css("background-color", bg);
  $miles.css("background-color", bg);
  $worktag.css("background-color", bg);
/*
the above can be done in one line :
$("#element1,#element2,#element3,#element4").css("background-color", bg);
*/
});
$sideBar.find('.myList').bind("mouseover", function(){
  $(this).css("background", "#fffccc");
}).bind("mouseout", function(){
  $(this).css("background", bg);
});

这里的问题似乎是鼠标悬停和点击相互冲突因为显然鼠标悬停会先触发然后onclick会触发所以除非你离开并返回它不会再次触发鼠标悬停

Try this maybe

$("div input").hover(function() {
//Do you
});

终于找到我的答案了

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");
                    }
                }
            }
        });
    });
相关文章：