Question

我真的很难用Javascript掩盖数据值。我在一所学校工作，他们正在取消“传统”评级。因此，他们不希望他们的成绩簿显示百分比，而是显示基于百分比的单词（是的，我知道）。我想用字符串替换％值。有了这个JS，它正确地提醒我所有的值，但返回值永远不会替换单元格中的％值。我错过了什么？我对JS非常陌生，所以这可能是一个简单的错误。

$('.percentage').each(function() {
  var corrected = $(this).html();
  corrected = parseFloat(corrected);
  alert(corrected);
  switch (true) {
    case (corrected < 48.75):
      return 'Unsatisfactory';
      break;
    case (corrected < 61.25):
      return 'Approaching ';
      break;
    case (corrected < 73.75):
      return 'Approaching+ ';
      break;
    case (corrected < 86.25):
      return 'Meeting ';
      break;
    case (corrected < 94.9):
      return 'Meeting+ ';
      break;
    case (corrected <= 100):
      return 'Exceeding ';
      break;
    default:
      return 'N/A';
  }

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

这样做。它解析单元格的文本，并使用基于当前分数的字符串值替换它。

$(".score").each(function() {
  var $this = $(this);
  $this.text(() => {
    var num = parseFloat($this.text());
    var val;
    if (num < 48.75)
      val = 'Unsatisfactory';
    else if (num < 61.25)
      val = 'Approaching ';
    else if (num < 73.75)
      val = 'Approaching+';
    else if (num < 86.25)
      val = 'Meeting';
    else if (num < 94.9)
      val = 'Meeting+';
    else if (num <= 100)
      val = 'Exceeding';

    return val;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Score</td>
    <td class="score">48.75</td>
  </tr>
  <tr>
    <td>Score</td>
    <td class="score">38.25</td>
  </tr>
  <tr>
    <td>Score</td>
    <td class="score">85.12</td>
  </tr>
  <tr>
    <td>Score</td>
    <td class="score">67.50</td>
  </tr>
  <tr>
    <td>Score</td>
    <td class="score">87.80</td>
  </tr>
  <tr>
    <td>Score</td>
    <td class="score">10.50</td>
  </tr>
  <tr>
    <td>Score</td>
    <td class="score">96.50</td>
  </tr>
</table>

td上的类确保您只解析具有实际分数的单元格。

Answer 2

从$().each返回值不符合您的目的。您想要在迭代的元素上更改innerText：

$('.percentage').each(function() {
  var corrected = $(this).html();
  corrected = parseFloat(corrected);
  let text;

  switch (true) {
    case (corrected < 48.75):
      text = 'Unsatisfactory';
      break;
    case (corrected < 61.25):
      text = 'Approaching ';
      break;
    case (corrected < 73.75):
      text = 'Approaching+ ';
      break;
    case (corrected < 86.25):
      text = 'Meeting ';
      break;
    case (corrected < 94.9):
      text = 'Meeting+ ';
      break;
    case (corrected <= 100):
      text = 'Exceeding ';
      break;
    default:
      text = 'N/A';
  }

  $(this).text(text)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="percentage">40</div>
<div class="percentage">72.65</div>
<div class="percentage">100</div>

这里$().text就是这样做的。你也可以使用vanilla JS：

this.innerText = text;

使用Javascript替换表格单元格中的文本值

2 个答案: