如何更改根据滑块更改显示的文本

-3

我有一个滑块和一个文本输入。有一个文本输入的默认值，我想使滑动到不同百分比的滑块时，文本输入中显示的数字发生变化。我想知道哪个标签我应该使用，我可以设置一个默认值，它不会受到更改结果的影响。我有它在的jsfiddle： http://jsfiddle.net/8DzCE/266/如何更改根据滑块更改显示的文本

<table id="foodaverage" style> 
    <tr> 
     <td align="center">Average amount</td> 
     <td></td> 
     <td><div id="foodcarb" style="display: inline;">carbon footprint(<p id="unit" style="font-size: 10px; display: inline;">tons CO<sub>2</sub>)</p></div></td> 
    </tr> 
    <tr> 
     <td><div id="simpleslider" class="slide"></div></td> 
     <td><div id="simplevalue" class="answer"></div></td> 
     <td><input type="text" value="528" class="result" id="foodanswer" /></td> 
    </tr> 
    <tr> 
     <td><div id="qslider" class="slide"></div></td> 
     <td><div id="asimplevalue" class="answer"></div></td> 
     <td><input type="text" value="423" class="result" id="foodanswer1" /></td> 
    </tr> 

</table>

的jQuery：

$(".slide").each(function(i,item){ 
    $(item).slider({ 
     value:50, 
     min: 0, 
     max: 100, 
     slide: function(event, ui){ 
      var nextTD = $(this).closest("td").next(); 

      nextTD.html(ui.value + '&#37;'); 
      var percent=parseFloat(ui.value); 
      var answer=nextTD.closest("td").next("input"); 
      var int=parseFloat(answer.val()); 
      answer.text(int * percent/100); 
     } 
    }); 
});

来源

2014-04-11 user3371790

你能澄清一下你的问题吗？ – hyperdrive

我没有看到在你的小提琴任何地方的文字输入。 –

http://jsfiddle.net/8DzCE/266/ – user3371790

看这个updated fiddle。我相信你只是有你的选择错误answer。我会说虽然这不是获取对象的最佳方法，但最好使用ID，OR类并通过父对象引用它们（摆脱所有那些最接近的，接下来的等等）。但现在我只是改变了选择这样：

var answer = nextTD.closest("td").next("td").closest("td").children("input");

Here is an update per the comments below。

来源

2014-04-11 19:04:14 Goose

更新的小提琴有我遇到的同样的问题。文本值将根据当前文本值而改变。当我滑块在100％的位置，它将永远不会回到原来的结果。 – user3371790

这个数字是错误的，因为你的计算结果是关闭的。你不断乘以文本框中数字的百分比，这意味着它正在呈指数级增长或变小。如果您想根据初始静态值进行计算，则需要在某处指定。我更新了答案，在第二个小提琴中使用隐藏的输入字段来存储初始值。（但是你真的可以将它们存储在任何地方 – Goose

如何更改根据滑块更改显示的文本

回答

相关问题