javascript - mousedrag 上的奇怪行为，javascript

Question

所以我使用 knob.js 创建两个表盘，一个在另一个里面。外表盘代表一本书的累积评分，即所有评分的平均值。这个外层表盘有 data-readOnly="true" 并且它的值在这些表盘的公共(public)中心可见。内部表盘供我(用户)提交他对该书的评分。因此，内部拨号值可以由我(用户)更改。

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

Answer 1

据我了解，您的问题与您对两个旋钮使用相同的更改回调这一事实有关。

$(function($) {
    var prev_ratings = [80, 80, 80]

    $('.outer-knob').knob();
    $(".inner-knob").knob({
            var new_ratings = prev_ratings;
            new_ratings.push(+$('.inner-knob').val());

            var sum = new_ratings.reduce(function(acc, v) { return acc + v }, 0)
            $('.outer-knob').val(sum / new_ratings.length);

           // code with some output is available on jsfiddle below
        },
    });
});

我用以下几点更新了你的 fiddle :

• 旋钮的不同初始化
• 以前的评级现在在一个数组中以便于测试
• 简化新评级的计算

http://jsfiddle.net/uHkN5/16/

我在数组上使用了 reduce 方法来进行实际的评分计算，如果您不熟悉它，可以在 mdn 上找到一些文档:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

但是，您仍然需要弄清楚如何将新评级发送到您的后端。