Почему я не могу добавить класс CSS, используя jQuery? - PullRequest
0 голосов
/ 30 октября 2019

У меня есть вопрос по поводу моего кода, я пытаюсь сделать div с отображаемым идентификатором зеленым, когда результат больше 10, он не работает, за исключением вычисления. если результат> 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>

1 Ответ

1 голос
/ 30 октября 2019

Вы должны изменить две вещи:

  • addClass и removeClass принимают только имена классов без точек;
  • Вы должны удалить "highText" при добавлении "lowText" и наоборот;

Вот рабочий скрипт: http://cssdeck.com/labs/v9fvdfxn

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...