Question

我有通过PHP生成的HTML代码。 PHP根据特定阈值是否低于特定阈值为特定类别指定类。范围可以是0-5，包括十进制数。我希望能够使用滑块动态更改阈值。这意味着我希望能够在通过滑块增加或减小阈值时更改div的颜色。我已经设置了JSFiddle，向您展示了我的意思的简单示例。我已经注释掉了html代码，它会显示结果应该是几个不同的阈值。我是JQuery / JS的初学者，所以我不知道从哪里开始。我试图在移动滑块时更改文本框中的值，但我甚至无法使其工作。

<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中。在此先感谢您的所有帮助！

基里耶

Answer 1

This是一个工作示例，向您展示如何使用jQuery根据滑块的值更新文本框和文本。

//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/

Answer 2

您只需将onchange事件绑定到滑块即可。

$("#slider1").change(function(){
    printValue('slider1', 'rangeValue1');    
});

以下是fiddle使用jQuery在滑块上添加新的onchange，以便更新值。

使用输入滑块更改文本颜色的颜色

2 个答案: