鼠标拖动时出现奇怪的行为，JavaScript

Question

所以我正在使用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 的演示中，我假设其他三个用户已经对这本书进行了80/100的评分...

- suneet

---

只是想提醒一下，我发现即使我点击拨号内部，也无法得到一致的结果。 - olive_tree

一个最佳实践，用于检查NaN的方法应该是：(typeof prev_my_val === 'number') && isNaN(prev_my_val)。 - olive_tree

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
        },
    });
});

我为您更新了这个示例：

• 旋钮的不同初始化方式
• 之前的评级现在在数组中方便测试
• 简化计算新评级的方法

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

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

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

- krtek