javascript - jQuery 每个元素都收集数据值并使用条件进行正确的输出

Question

我在循环 HTML 元素、从数据点收集值并检查传递的值是否小于选择并显示正确的标题时遇到了一些问题。

var percentageScore = "43";

$('.quiz-score .final-result').each(function(index) {
  if (percentageScore <= $(this).data('points')) {
    var finalStatus = $(this).find('h3').text();
    $('.final-score').text(finalStatus);
  }
});

.final-result { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="quiz-score">
  <div class="final-result" data-points="20">
    <h3>
      under 20
    </h3>
  </div>
  <div class="final-result" data-points="40">
    <h3>
      between 21 and 40
    </h3>
  </div>
  <div class="final-result" data-points="60">
    <h3>
      between 41 and 60
    </h3>
  </div>
  <div class="final-result" data-points="80">
    <h3>
     between 61 and 80
    </h3>
  </div>
  <div class="final-result" data-points="100">
    <h3>
      between 81 and 100
    </h3>
  </div>
</div>

<div class="final-score"></div>

Answer 1

你必须打破循环。

要中断 $.each() 循环，请返回 false。

来自the docs :

Use return false to break out of each() loops early.

var percentageScore = "43";

$('.quiz-score .final-result').each(function(index) {
  if (percentageScore <= $(this).data('points')) {
    var finalStatus = $(this).find('h3').text();
    $('.final-score').text(finalStatus);
    return false;
  }
});

.final-result { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="quiz-score">
  <div class="final-result" data-points="20">
    <h3>
      under 20
    </h3>
  </div>
  <div class="final-result" data-points="40">
    <h3>
      between 21 and 40
    </h3>
  </div>
  <div class="final-result" data-points="60">
    <h3>
      between 41 and 60
    </h3>
  </div>
  <div class="final-result" data-points="80">
    <h3>
     between 61 and 80
    </h3>
  </div>
  <div class="final-result" data-points="100">
    <h3>
      between 81 and 100
    </h3>
  </div>
</div>

<div class="final-score"></div>