[英]How to change active and hovering text in Javascript depending on condition?
I have these divs that I use as buttons.我有这些用作按钮的 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>
How could I make it that when color_switch changes, the color that the text changes to also changes?我怎样才能做到当 color_switch 改变时,文本改变的颜色也会改变? So when color_switch = 1, the text is highlighted in red, and when color_switch = 2, the text is highlighted in blue, and so on?
那么当 color_switch = 1 时,文本以红色突出显示,当 color_switch = 2 时,文本以蓝色突出显示,等等?
For example, you can use switch in which you'll set to what color should the current element be painted.例如,您可以使用 switch 来设置当前元素应该被绘制成什么颜色。
switch (color_switch) {
case 1:
this.style.color = "red";
break;
case 2:
this.style.color = "blue";
break;
}
There are many possible solutions, here is one of them: https://jsfiddle.net/9bj86L72/有很多可能的解决方案,这里是其中之一: https://jsfiddle.net/9bj86L72/
I think, the best practice is not merge css code in js, the best is create modifier classes and use it to map it in js.我认为,最好的做法是不要在 js 中合并 css 代码,最好的是创建修饰类并将其用于 map 它在 js 中。 for example:
例如:
.time-buttons.type1 .time-button:hover {
color: red;
}
.time-buttons.type2 .time-button:hover {
color: red;
}
after in js according to de color_switch set the modifier class在 js 中根据 de color_switch 设置修饰符 class
document.querySelector('.time-buttons').className = document.querySelector('.time-buttons').className + " type" + color_switch
please view example in https://codepen.io/ricardocermeno/pen/ExojdVZ请查看示例https://codepen.io/ricardocermeno/pen/ExojdVZ
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.