使用 jquery 动态更改背景颜色答案

【问题标题】：Changing background color dynamically with jquery使用 jquery 动态更改背景颜色
【发布时间】：2014-08-06 12:05:19
【问题描述】：

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

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

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

【问题讨论】：

除了不明白为什么不使用 css 之外，您能否发布更多代码以显示整个相关标记？也许您在其他地方使用 css 会导致样式冲突
我没有使用 CSS 类，因为它是一个超过 200,000 行的应用程序，动态发生了一百万件事。把它放在 CSS 中永远不会让一切都在正确的时间得到它。我确实有一个 CSS 文件，但不能包含其中的所有内容。

标签： javascript jquery html css background-color

【解决方案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);
});

【讨论】：

感谢您向我展示了执行此操作的快捷方式，但恐怕它的作用完全相同，只是格式不同。还有其他想法吗？？谢谢。

【解决方案2】：

好吧，所以这里的问题似乎是你有一个 mouseover 和一个 click 相互冲突，因为显然 mouseover 会首先触发然后 onclick 会触发所以除非你出去然后回来它不会触发 mouseover再次。

不妨试试这个

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

【讨论】：

感谢您解释鼠标悬停/单击的顺序。我不知道那里的优先级。我试过你的代码，但不幸的是它没有做任何不同的事情。还有其他建议吗？

【解决方案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");

                    }
                }
            }

        });
    });

【讨论】：