所以我使用knob.js 来创建两个表盘,一个在另一个里面。外盘代表一本书的累积评分,即所有评分的平均值。这个外部表盘具有data-readOnly="true"
并且它的价值在这些表盘的共同中心是可见的。内部表盘供我(用户)提交他对该书的评分。因此,我(用户)可以更改内部表盘值。
<div class="demo_sub_outer">
<input class="knob" data-thickness=".1" data-width="150" data-height="150" data-angleOffset=0 data-displayInput="true" data-angleArc=360 data-fgColor="#209652" data-bgColor="#eee" data-inputColor="" data-readOnly="true" value="{{ u_list.cum_attr_ratings.sexy }}">
</div>
<div class="demo_sub" id="demo_sub_1">
<input class="knob" id="sexy" data-thickness="0.5" data-width="130" data-height="130" data-angleOffset=0 data-displayInput="false" data-angleArc=360 data-fgColor="#b8dcc7" data-bgColor="#e5e5e5" value="{{ u_list.attr_ratings.sexy }}" Title="Cumulative wealthiness" >
</div>
我希望它的工作方式是,当我更改内部表盘值(即,当我对一本书进行评分,或更改我对一本书的评分时),外部表盘值(累积评分)应相应更新。
这是我尝试这样做的方法...... jsFiddle
现在,如果我通过单击表盘上的某处更改内部表盘值,这可以正常工作,但如果我通过拖动鼠标更改此值...结果是意外的。这种奇怪行为的可能原因是什么。
编辑:在jsFiddle的演示中,我假设其他 3 位用户对这本书的评分为 80/100 ...