使用 jquery 动态更改背景颜色

Posted 2023-02-21

【中文标题】使用 jquery 动态更改背景颜色

【英文标题】：Changing background color dynamically with 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 文件，但不能包含其中的所有内容。

【参考方案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");

                    
                
            

        );
    );