根据子DOM元素的值将不同的类应用于子DOM元素 [英] Apply different class to child DOM elements depending on their value

问题描述

这是此问题的扩展.

我们得到了一个类似于以下结构的结构，具体取决于类score的元素的值，我们添加了类win或lose.

We got a structure like the one below, depending on the value of the element with class score we add a class win or lose.

<div class="war">
  <div class="team">
    <span class="score">8</span>
  </div>
  <div class="team">
    <span class="score">5</span>
  </div>
</div>
<div class="war">
  <div class="team">
    <span class="score">12</span>
  </div>
  <div class="team">
    <span class="score">25</span>
  </div>
</div>
<div class="war">
  <div class="team">
    <span class="score">57</span>
  </div>
  <div class="team">
    <span class="score">57</span>
  </div>
</div>

用户Rory McCrossan提供了一个可行的解决方案 https://stackoverflow.com/a/52757164/4236048

User Rory McCrossan provided a working solution https://stackoverflow.com/a/52757164/4236048

document.querySelectorAll('.war').forEach(function(war) {
  var scores = Array.from(war.getElementsByClassName("score"));
  var winIndex = scores.reduce((iMax, x, i, arr) => parseInt(x.innerText, 10) > parseInt(arr[iMax].innerText, 10) ? i : iMax, 0);      
  scores.forEach((score, i) => score.classList.add(winIndex == i ? 'win' : 'lose'));
});

但是我没有考虑平局的情况，其解决方案不再可行.

But I did not contemplate the case of a draw and its solution is no more viable.

有没有想到在这种新情况下逻辑如何? .win/.lose/.draw

Any thoughts about how the logic would be in this new scenario ? .win / .lose / .draw

预先感谢

推荐答案

更新#2

比较.war项内的得分并将类应用于.score项

Compare scores inside a .war item and apply classes to .score items

function applyScoreClass() {
  $('.war').each(function(index, elem) {
    var $elem = $(elem);
    var warScores = [];
    $elem.find('.score').each(function(i,el) {
       var txt = $(el).text();
       var num = (txt && txt.length > 0) ? parseInt(txt) : null;
       if (num !== null) {
           warScores.push({
               elem: $(el),
               score: num
           });
       }
    });
    if (warScores.length === 2) {
       if (warScores[0].score > warScores[1].score) {
           warScores[0].elem.addClass('win');
           warScores[1].elem.addClass('lose');
       } else if (warScores[0].score === warScores[1].score) {
           warScores[0].elem.addClass('draw');
           warScores[1].elem.addClass('draw');
       } else if (warScores[0].score < warScores[1].score) {
           warScores[1].elem.addClass('win');
           warScores[0].elem.addClass('lose');
       }
    }
  });
}

applyScoreClass();

.war {
  border: 1px solid #d8d8d8;
}
.win {
  color: green;
}
.draw {
  color: orange;
}
.lose {
  color: red;
}

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

<div class="war">
  <div class="team">
    <span class="score">8</span>
  </div>
  <div class="team">
    <span class="score">5</span>
  </div>
</div>
<div class="war">
  <div class="team">
    <span class="score">2</span>
  </div>
  <div class="team">
    <span class="score">4</span>
  </div>
</div>

这篇关于根据子DOM元素的值将不同的类应用于子DOM元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！