鼠标拖动的怪异行为，javascript

Weird behaviour on mousedrag, javascript

本文关键字：javascript 拖动 鼠标      更新时间：2023-09-26

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

现在如果我通过单击表盘上的某个地方改变内部表盘值，则可以正常工作，但如果我通过拖动鼠标改变此值…结果出乎意料。这种奇怪的行为可能是什么原因呢?

EDIT:在jsFiddle的演示中，我假设另外3个用户给这本书打了80/100的分数…

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

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

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

相关文章：