如何更改JQuery旋钮内的文本 [英] How to change text inside JQuery knob

问题描述

想要更改JQuery Knob的文本。例如，我的消耗率为23％，我希望将23％的行放在行中并在圈内的新行中消耗。换句话说，我想在不同风格的百分比下添加（消费）（速率16px和消耗12px的字体大小）

解决方案

这就是我的意思已完成：我加载了您引用的页面，并且看不到任何文档，单击查看 - > 页面源（这些菜单项可能会有所不同）查看页面源并找到样本，例如

 <  输入    class   =  knob   数据宽度  =  200    data-min   =   -  100     data-displayPrevious   =   true   value   =  44 >  

（确定错误的样本：所有属性值最好用引号。）

如你所见，你可以改变 value 属性值。假设您使用jQuery通过 id 获取此元素的包装：

 <   input     id   =  myKnob    class   =  knob    data-width   =  200    data-min   =   -  100    data -displayPrevious   =   true  值  =  44  >  

在JavaScipt中：

  var  myKnob = 

（ ＃myKnob）; // 使用ID选择器
// ...
myKnob.val（ 55 ）;

试一试。值44应该变为55.依此类推......



请参阅：

http://api.jquery.com/id-selector [ ^ ]，

http：//api.jquery .com / category / selectors [ ^ ]，

http://api.jquery.com/val [ ^ ]。

-SA

want to change the text of JQuery Knob. For example I have a rate 23% consumed I want to put 23% on row and consumed in new row inside the circle. In other word, I want to add (consumed) under the percentage in different style (The font size of rate 16px and consumed 12px)

解决方案

Here is what I've done: I loaded the page you've referenced, and, seeing no documentation, clicked "View" -> "Page source" (these menu items may vary) looked at the page source and found samples like

<input class="knob" data-width="200" data-min="-100" data-displayPrevious=true value="44">

(Bad sample to be sure: all attribute values should better be in quotation marks.)
As you can see you can just change the value attribute value. Let's say, you use jQuery to get a wrapper to this elements by id:

<input id="myKnob" class="knob" data-width="200" data-min="-100" data-displayPrevious=true value="44">

In JavaScipt:

var myKnob =

("#myKnob"); // using id selector // ... myKnob.val(55);

Try it out. The value 44 should change to 55. And so on…

Please see:
http://api.jquery.com/id-selector[^],
http://api.jquery.com/category/selectors[^],
http://api.jquery.com/val[^].

—SA

这篇关于如何更改JQuery旋钮内的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！