[英]How to change active and hovering text in Javascript depending on condition?
我有这些用作按钮的 div。
var color_switch = 1; var tmbtns = document.getElementsByClassName("time-button"); for (var i = 0; i < tmbtns.length; i++) { tmbtns[i].addEventListener("click", function() { var current = document.getElementsByClassName("active2"); current[0].className = current[0].className.replace(" active2", ""); this.className += " active2"; }); }
.time-buttons{ float: left; }.time-button{ float: left; padding: 0.2rem; padding-bottom: 0.3rem; margin-left: 1px; margin-right: 1px; cursor: pointer; color: lightgrey; width: 30px; text-align: center; }.active2, .time-button:hover{ color: red; }
<div class="time-buttons"> <div class="time-button active2"><small>2h</small></div> <div class="time-button"><small>8h</small></div> <div class="time-button"><small>1d</small></div> <div class="time-button"><small>3d</small></div> <div class="time-button"><small>1w</small></div> <div class="time-button"><small>1m</small></div> </div>
我怎样才能做到当 color_switch 改变时,文本改变的颜色也会改变? 那么当 color_switch = 1 时,文本以红色突出显示,当 color_switch = 2 时,文本以蓝色突出显示,等等?
例如,您可以使用 switch 来设置当前元素应该被绘制成什么颜色。
switch (color_switch) {
case 1:
this.style.color = "red";
break;
case 2:
this.style.color = "blue";
break;
}
有很多可能的解决方案,这里是其中之一: https://jsfiddle.net/9bj86L72/
我认为,最好的做法是不要在 js 中合并 css 代码,最好的是创建修饰类并将其用于 map 它在 js 中。 例如:
.time-buttons.type1 .time-button:hover {
color: red;
}
.time-buttons.type2 .time-button:hover {
color: red;
}
在 js 中根据 de color_switch 设置修饰符 class
document.querySelector('.time-buttons').className = document.querySelector('.time-buttons').className + " type" + color_switch
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.