使用jQuery动态更改背景颜色

Question

现在，我页面的一部分包含对象列表。 当您将鼠标悬停在它们上方时，背景变为浅黄色，当您将鼠标悬停在它们上时，背景变为白色。 我希望其中一个对象在满足条件时变成绿色背景，然后在不满足条件时恢复正常。

我遇到的一个问题是：如果满足条件，它会更改颜色，如果不是，我将其设置回白色。 但是现在淡黄色的鼠标悬停将不起作用。 其余部分变为黄色，但一部分保持白色。 我不知道如何“撤消”我的绿色更改以保持鼠标悬停/鼠标悬停正常工作。 有什么帮助吗？ 这是我的代码。

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

Answer 1

尝试这个 ：

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

Answer 2

好的，这里的问题似乎是您有一个鼠标悬停和一个单击，它们彼此冲突，因为显然鼠标悬停将首先触发，然后onclick将会触发，因此除非您退出并返回它，否则不会再次触发鼠标悬停。

试试这个也许

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

Answer 3

终于找到了我的答案。

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

                    }
                }
            }

        });
    });