我有通过 PHP 生成的 html 代码。 PHP 根据特定值是否低于给定阈值将一个类分配给特定值。范围可以是 0-5 之间的任何值,包括十进制数。我希望能够使用 slider 动态更改阈值。这意味着我希望能够在通过 slider 增加或减少阈值时更改 div 的颜色。我已经设置了一个 JSFiddle这向您展示了我的意思的一个简单示例。我已经注释掉了 html 代码,它向您展示了在几个不同的阈值下的结果应该是什么。我是 JQuery/JS 的初学者,所以我不知道从哪里开始。我试图在您移动 slider 时更改文本框中的值,但我什至无法让它工作。
<br/>
<!--Input slider to change the threshold
and the color of the numbers -->
<form action="slider.html" style="float:right;">
<input id="slider1" type="range" value="2" min="0" max="5" step="1" onchange="printValue('slider1','rangeValue1')"/>
<input id="rangeValue1" type="text" size="2"/>
</form>
<!--This is what it should look like at a threshold of 2 -->
<div class = "wrapped" >
<div class = "post" > This is an example of a post </div>
<div class = "bully"> 2.50 </div>
</div>
<div class = "wrapped" >
<div class = "post" > This is an example of a second post </div>
<div class = "normal"> 1.50 </div>
</div>
<!-- This is what it should look like at a threshold of 3
<div class = "wrapped" >
<div class = "post" > This is an example of a post </div>
<div class = "normal"> 2.50 </div>
</div>
<div class = "wrapped" >
<div class = "post" > This is an example of a second post </div>
<div class = "normal"> 1.50 </div>
</div> -->
<!-- This is what it should look like at a threshold of 1
<div class = "wrapped" >
<div class = "post" > This is an example of a post </div>
<div class = "bully"> 2.50 </div>
</div>
<div class = "wrapped" >
<div class = "post" > This is an example of a second post </div>
<div class = "bully"> 1.50 </div>
</div> -->
这是我的示例的 HTML 代码。 CSS 和 JQuery 代码包含在 JSFiddle 中。预先感谢您的所有帮助!
基里惠
最佳答案
This是一个工作示例,向您展示如何使用 jQuery 根据 slider 的值更新文本框和文本。
//Initialize the value in the textbox
$(document).ready(function() {
updateSliderValue($('#slider1').val());
$('#slider1').change(function() {
updateSliderValue($(this).val());
});
});
function updateSliderValue(newValue) {
$('#rangeValue1').val(newValue);
$('.wrapped .value').html(newValue);
if (newValue > 2) {
$('.wrapped .value').removeClass('normal').addClass('bully');
} else {
$('.wrapped .value').removeClass('bully').addClass('normal');
}
编辑:
我已经更新了 jsFiddle 来做你想做的事:http://jsfiddle.net/xuocsch9/1/
关于jquery - 使用输入 slider 更改文本颜色的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27712089/