Changing Background Color Dynamically With Jquery

Right now there is a part of my page that has a list of objects. When you hover over them, the background turns a light yellow color and return to white when you mouseout. I want o

Solution 1:

Try this :

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

Solution 2:

Alright so the problem here seems to be you have a mouseover and a click which conflict with each other because obviously mouseover will fire first and then onclick will fire so unless you go out and come back in it won't trigger the mouseover again.

Try this maybe

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

Solution 3:

Finally found my answer to this.

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 conditionif($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");

                    }
                }
            }

        });
    });