javascript - jQuery 如何在值大于 1 时更改 CSS

Question

好的，所以已经有了答案，但我正在尝试做完全相同的事情，但我有另一个 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"); 
         }
    }); 
});

Answer 1

引用我的回答，希望对你有帮助。

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