jQuery代码无法为表格行添加Bootstrap背景类问题求助

我开发了一个投票系统，可收集用户评分并计算平均值更新至表格，但其中根据平均值为表格行添加Bootstrap的bg-danger、bg-warning、bg-success背景类的jQuery逻辑未生效，其他功能正常。核心疑问：为什么条件满足时，jQuery代码无法为表格行添加背景颜色？

投票HTML代码 #

<form id="pollForm" class="mb-4">
  <div class="form-group">
    <label for="pitanje1">Koliko ste zadovoljni lokacijom FUTURA Shopping Centra?</label>
    <select id="pitanje1" name="pitanje1" class="form-control">
      <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>
    </select>
  </div>
  <div class="form-group">
    <label for="pitanje2">Koliko ste zadovoljni radnjama u FUTURA Shopping Centru?</label>
    <select id="pitanje2" name="pitanje2" class="form-control">
      <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>
    </select>
  </div>
  <div class="form-group">
    <label for="pitanje3">Koliko ste zadovoljni izgledom FUTURA Shopping Centra?</label>
    <select id="pitanje3" name="pitanje3" class="form-control">
      <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>
    </select>
  </div>

  <button type="button" class="btn btn-dark mt-2" onclick="saveAnswers()">
    Pošalji
  </button>
</form>
<table class="table">
  <thead>
    <tr>
      <th>Pitanja</th>
      <th>Prosečna ocena</th>
    </tr>
  </thead>
  <tbody id="resultsTableBody">
    <tr id="row1">
      <td>Koliko ste zadovoljni lokacijom FUTURA Shopping Centra?</td>
      <td id="prosecnaOcena1">0</td>
    </tr>
    <tr id="row2">
      <td>Koliko ste zadovoljni radnjama u FUTURA Shopping Centru?</td>
      <td id="prosecnaOcena2">0</td>
    </tr>
    <tr id="row3">
      <td>Koliko ste zadovoljni izgledom FUTURA Shopping Centra?</td>
      <td id="prosecnaOcena3">0</td>
    </tr>
  </tbody>
</table>

jQuery及Bootstrap引入与逻辑代码 #

<script src="js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
  const answersData = {
    pitanje1: { ukupnaOcena: 0, brOdgovora: 0 },
    pitanje2: { ukupnaOcena: 0, brOdgovora: 0 },
    pitanje3: { ukupnaOcena: 0, brOdgovora: 0 },
  };

  function saveAnswers() {
    const pitanje1 = parseInt($("#pitanje1").val());
    const pitanje2 = parseInt($("#pitanje2").val());
    const pitanje3 = parseInt($("#pitanje3").val());

    updateAnswer("pitanje1", pitanje1);
    updateAnswer("pitanje2", pitanje2);
    updateAnswer("pitanje3", pitanje3);

    updateResultsTable();
  }

  function updateAnswer(pitanje, vrednost) {
    answersData[pitanje].ukupnaOcena += vrednost;
    answersData[pitanje].brOdgovora++;
  }

  function updateResultsTable() {
    $.each(answersData, function (pitanje, podaci) {
      const srednjaVrednost =
        podaci.ukupnaOcena > 0
          ? (podaci.ukupnaOcena / podaci.brOdgovora).toFixed(2)
          : 0;

      $(`#prosecnaOcena${pitanje.slice(-1)}`).text(srednjaVrednost);

      /* 以下为失效的背景类添加逻辑 */
      const row = $(`#row${pitanje.slice(-1)}`);

      row.removeClass("bg-danger bg-warning bg-success");

      if (srednjaVrednost < 2.5) {
        row.addClass("bg-danger");
      } else if (srednjaVrednost >= 2.5 && srednjaVrednost <= 3.5) {
        row.addClass("bg-warning");
      } else {
        row.addClass("bg-success");
      }
    });
  }

  $("#pollForm button").on("click", function (event) {
    event.preventDefault();

    saveAnswers();
  });
</script>

问题根源及修复方案 #

1. 脚本引入顺序错误 #

Bootstrap的JavaScript依赖jQuery，必须先引入jQuery再引入Bootstrap。原代码先加载Bootstrap，后加载jQuery，会导致依赖缺失，影响jQuery的正常操作。

修复：
调整脚本顺序：

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>

2. 数值类型不匹配 #

toFixed(2)方法返回的是字符串类型，直接和数字（2.5、3.5）进行比较时，会触发字符串的字典序比较，导致条件判断逻辑出错。例如"3.50" <= 3.5会被判定为false，因为字符串比较中"3.50"比"3.5"长，会被认为更大。

修复：
将toFixed(2)处理后的字符串转回数字类型：

const srednjaVrednost = podaci.ukupnaOcena > 0 
  ? Number((podaci.ukupnaOcena / podaci.brOdgovora).toFixed(2)) 
  : 0;

3. 重复绑定点击事件 #

按钮同时使用了onclick属性和jQuery的on("click")绑定，导致saveAnswers()被执行两次，虽然不直接影响背景色，但会导致数据统计错误。

修复：
移除按钮的onclick="saveAnswers()"属性：

<button type="button" class="btn btn-dark mt-2">
  Pošalji
</button>

内容的提问来源于stack exchange，提问作者rectangular_circle