Question

我对我的代码有疑问，当结果大于10时，我试图将显示ID的div设为绿色，除计算外，它不起作用。如果结果> 10，则将整个#display元素文本设为绿色。否则，将上面的类设为红色

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    .highText {
      color: green;
    }

    .lowText {
      color: red;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script>
    $(document).ready(startApp);

    function startApp() {
    function doCalculation(){
      var number1 = Number($('#number1').val());
      var number2 = Number($('#number2').val());
      var result = number1 + number2;
      if(result > 10){
        $('#display').addClass('.highText');
        $('#display span').text(result);
      }
      else{
        $('#display').addClass('.lowText');
        $('#display span').text(result);
    }

    }
    $('#doIt').on('click', doCalculation);

  }

  </script>
</head>
<body>
  <input type="text" id="number1" placeholder="1st number"> +
  <input type="text" id="number2" placeholder="2nd number">
  <div id="display">result--- <span></span></div>
  <button id="doIt">calculate!</button>
</body>

</html>

Answer 1

您应该修改两件事：

addClass和removeClass仅接受不带点的类名称；
添加“ lowText”时应删除“ highText”，反之亦然；

这是工作脚本：http://cssdeck.com/labs/v9fvdfxn

为什么我不能使用jQuery添加CSS类？

1 个答案: