鼠标拖动,javascript的奇怪行为

时间:2014-08-12 19:17:10

标签: javascript jquery html css jquery-knob

所以我使用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 ...

1 个答案:

答案 0 :(得分:2)

根据我的理解,您的问题与两个旋钮使用相同的更改回调有关。

$(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

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