jquery 如何根据js上的值应用css

iklwldmw  于 2023-02-08  发布在  jQuery
关注(0)|答案(1)|浏览(117)

我需要根据id ="total"的值更改颜色。
如果数值〈96%：颜色必须为红色。如果值〉= 96%〈97%：颜色必须为黄色。如果值〉= 97%：颜色必须是绿色的，谢谢。

function arredondaTudo() {

  var valorOne = parseInt(document.getElementById("campoOne").value)
  var valorTwo = parseInt(document.getElementById("campoTwo").value)
  var valorThree = parseInt(document.getElementById("campoThree").value)

  if (isNaN(valorOne))
    valorUm = 0

  if (isNaN(valorTwo))
    valorDois = 0

  if (isNaN(valorThree))
    valorTres = 0

  var Arredondamento = ((valorThree - valorTwo) / valorThree * 100);

  document.getElementById("total").innerHTML = (Arredondamento).toFixed(2);
}
$(document).ready(function() {
  $("#campoOne").change(function() {
    var val = $(this).val();
    if (val == "clma") {
      $("#campoThree").html("<option value='250'>25</option><option value='260'>26</option><option value='270'>27</option><option value='280'>28</option><option value='290'>29</option><option value='300'>30</option><option value='310'>31</option>");
      $("#campoTwo").html("<option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option>");
      document.getElementById("total").innerHTML = "100";
    }
  });
});
$(document).ready(function() {
  $("#campoThree").change(function() {
    var val = $(this).val();
    if (val == "250") {
      $("#campoTwo").html("<option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option>");
      document.getElementById("total").innerHTML = "100";

    } else if (val == "260") {
      $("#campoTwo").html("<option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option>");
      document.getElementById("total").innerHTML = "100";

    } else if (val == "270") {
      $("#campoTwo").html("<option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option>");
      document.getElementById("total").innerHTML = "100";

    } else if (val == "280") {
      $("#campoTwo").html("<option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option><option value='14'>14</option>");
      document.getElementById("total").innerHTML = "100";

    } else if (val == "290") {
      $("#campoTwo").html("<option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option><option value='14'>14</option>");
      document.getElementById("total").innerHTML = "100";

    } else if (val == "300") {
      $("#campoTwo").html("<option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option><option value='14'>14</option><option value='15'>15</option>");
      document.getElementById("total").innerHTML = "100";

    } else if (val == "310") {
      $("#campoTwo").html("<option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option><option value='14'>14</option><option value='15'>15</option>");
      document.getElementById("total").innerHTML = "100";
    }
  });
});
.green {
  background-color: #90EE90;
}
<div id="two">
  <table>
    <tr>
      <td class="yellow">Escova</td>
      <td class="yellow">
        <select onchange="arredondaTudo()" type="text" name="campoOne" id="campoOne">
          <option value="clma">Classic Macia</option>
          <var id="valorOne"></var>
      </td>
    </tr>
    <tr>
      <td class="yellow">Quantidade de fios</td>
      <td class="yellow">
        <select onchange="arredondaTudo()" type="text" name="campoThree" id="campoThree" value="">
          <option value="250">25</option>
          <option value="260">26</option>
          <option value="270">27</option>
          <option value="280">28</option>
          <option value="290">29</option>
          <option value="300">30</option>
          <option value="310">31</option>
          <var id="valorThree"></var>
      </td>
    </tr>
    <tr>
      <td class="yellow">Defeitos</td>
      <td class="yellow">
        <select onchange="arredondaTudo()" type="text" name="campoTwo" id="campoTwo" maxlength="2" value="0"><button onclick="arredondaTudo()"> ✅</button>
          <option value="0" selected>0</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
          <var id="valorTwo"></var>
      </td>
    </tr>
    <tr>
      <td class="gray">Porcentagem</td>
      <td class="green">
        <div><span id="total">100</span>%</div>
      </td>
    </tr>
  </table>
</div>
jquery

1条答案

按热度按时间
ivqmmu1c

ivqmmu1c1#

下面的代码示例可以帮助您：（我正在使用您创建的onChange方法，并根据#total字段的当前内容（.textContent）检查要选择哪种颜色。然后我正在使用.style.setProperty(css-property, css-value)更改颜色）

window.onload = function() {
  arredondaTudo();
};

function arredondaTudo() {
  // Update value based of selected option
  const selector = document.getElementById("selector");
  const selectedValue = selector.options[selector.selectedIndex].value;
  document.getElementById("total").textContent = selectedValue + "%";
  
  // Update color based on value
  const total = document.getElementById("total").textContent;
  const percentage = parseFloat(total.replace('%',''));
  if (percentage < 96) {
    document.getElementById("total-container").style.setProperty("background-color", "red");
  } else if (percentage < 97) {
    document.getElementById("total-container").style.setProperty("background-color", "yellow");
  } else {
    document.getElementById("total-container").style.setProperty("background-color", "green");
  }
}
#total-container {
  display: inline-block;
  margin-top: 1em;
  background-color: gray;
}

#total-container #total {
  margin: 5px 10px;
  color: black;
  font-weight: 900;
}
<html>
  <head>
  </head>
  <body>
    <select onchange="arredondaTudo()" type="text" value="" id="selector">
      <option value="93.4">Option 1</option>
      <option value="96.5">Option 2</option>
      <option value="98.9">Option 3</option>
    </select>
    <br>
    <div id="total-container">
      <p id="total">85.3%</p>
    <div>
  </body>
</html>
赞(0）分享  回复(0）举报  2023-02-08
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com