jQuery如果value大于1，如何更改CSS

Question

Alright so there is already an answer to this but I am trying to do the exact same thing, but I've same another css class to "call" this script.

Example: I have this calling to messages, when the content inside messages is over 0 it will change the background color, what I would like to do is change the bottom border on ".root_panel" to the same color as the messages. I'm very new to JavaScript.

Script:

$(document).ready(function () 
{
   $(".messagess").each(function() 
    {
      var el = $(this);
      var value = parseFloat(el.text());
      if (value > 0) 
         {
            el.css("background","#6E8A75").css("color","#fff");
         }
      else
         {
            el.css("color", "#fff"); 
         }
    }); 
});

Answer 1

see my answer as a reference, hope this help.

 $(document).ready(function(){ $("button").click(function(){ if($("#zero").val() <= 0){ $(".root_panel").css({ 'border-bottom' : '2px solid red' }); }else if($("#zero").val() === "1"){ $(".root_panel").css({ 'border-bottom' : '2px solid blue' }); }else if($("#zero").val() === "2"){ $(".root_panel").css({ 'border-bottom' : '2px solid green' }); }else if($("#zero").val() === "3"){ $(".root_panel").css({ 'border-bottom' : '2px solid violet' }); }else if($("#zero").val() === "4"){ $(".root_panel").css({ 'border-bottom' : '2px solid pink' }); }else if($("#zero").val() === "5"){ $(".root_panel").css({ 'border-bottom' : '2px solid gray' }); }else if($("#zero").val() === "6"){ $(".root_panel").css({ 'border-bottom' : '2px solid black' }); }else if($("#zero").val() === "7"){ $(".root_panel").css({ 'border-bottom' : '2px solid orange' }); }else{ $(".root_panel").css({ 'border-bottom' : 'none' }); } }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="root_panel" style="overflow: auto;">root panel</div> <button>button</button> <input type="text" id="zero" />