javascript - 根据子 DOM 元素的值应用不同的类
问题描述
这是这个问题的延伸。
我们得到了一个像下面这样的结构,这取决于score
我们添加一个 classwin
或.class 的元素的值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
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'));
});
但我没有考虑平局的情况,它的解决方案不再可行。
关于这个新场景中的逻辑如何的任何想法?.win
// .lose
_.draw
提前致谢
解决方案
更新#2
比较.war
项目内的分数并将类应用于.score
项目
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>
推荐阅读
- python - 无法理解 [Errno 111] 连接被拒绝
- deep-learning - 如果在输出层使用 sigmoid,pytorch 中分类问题的损失函数应该是多少
- sql - 如何使用 SQL 语句在 HANA 中插入连续日期?
- pycharm - 如何设置 python 控制台和变量资源管理器的布局
- javascript - 加载另一个后加载 JS 脚本
- android - 如何根据左侧宽度限制textView的宽度
- javascript - turf.js:缓冲区执行但 geojson 未添加到传单地图
- iis - 从 vue js 中的 url 中删除哈希
- amazon-web-services - Lambda 调用失败,没有权限错误
- wordpress - WordLift 中的自定义分类支持