Question

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

我发生了一个问题：如果条件满足，它会改变颜色，如果不是，我将它设置回白色。但现在淡黄色的鼠标悬停不起作用。其余部分变黄，但一部分保持白色。我不知道如何撤消＆＃34;我的绿色变化，以保持鼠标悬停/鼠标移动正常工作。有帮助吗？这是我的代码。

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

                    }
                }
            }

        });
    });

使用jquery动态更改背景颜色

3 个答案: