javascript – jQuery如果值大于1,如何更改CSS

好吧所以已经有了答案,但我正在尝试做同样的事情,但我有同样的另一个css类来“调用”这个脚本.

示例：我对消息进行调用,当消息内的内容超过0时,它将更改背景颜色,我想要做的是将“.root_panel”的底部边框更改为与消息相同的颜色.我是JavaScript的新手.

脚本：

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

解决方法:

看到我的答案作为参考,希望这个帮助.

$(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" />